Javascript Hover-highlight List Items

Question

Basically, I have a <nav> element with an <ul> in it for navigation items. Using JavaScript I want to change the color or background-color of a list item I hover over. I've got this to work with one item (by id) in the w3 test utility, but how would I do it for all of them?

my nav:

         <nav>
            <ul>
                <li><a href="home.html">Home </a></li>
                <li><a href="about.html"> About </a></li>
                <li><a href="experience.html"> Experience </a></li>
                <li><a href="contact.html"> Contact </a></li>
            </ul>
        </nav>

(Minus a form input submitting to a post page)

Additionally, I would like to get this working all within my js file, but I couldn't get that working in W3.

---

EDIT

I apologize for the poor post and method of supplying code.

Now, I've developed a solution based on the reply from @Adam-Buchanan-Smith :

<nav>
      <ul>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="home.html">Home </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="about.html"> About </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="experience.html"> Experience </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="faq.html"> FAQ </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="references.html"> References </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="contact.html"> Contact </a></li>
       </ul>
</nav>

JS:

function hover(element)
{
    element.style.backgroundColor = "red";
}
function hoverOff(element)
{
    element.style.backgroundColor = "#000079";
}

it seems to work, but can someone please explain why/how JS 'uses

style.backgroundColor

To change the color, while CSS uses:

background-color:

JavaScript Usage Rational

I know it seems silly to not use CSS, but I am doing this for a final project and the prof wants JS. No, I am not trying to have others do my work, I just wanted some guidance -- and thank you for that.

Answer 1

Just use CSS...

nav > ul > li a:hover {
  color: red;
}

<nav>
  <ul>
    <li><a href="home.html">Home </a></li>
    <li><a href="about.html"> About </a></li>
    <li><a href="experience.html"> Experience </a></li>
    <li><a href="contact.html"> Contact </a></li>
  </ul>
</nav>

Doing that in JS is silly, but if you really have to for some reason then there's 2 main ways:

• Attach event handlers to individual links

[].forEach.call(document.querySelectorAll('nav > ul > li a'), function (link) {
    link.addEventListener('mouseover', coloringHandler);
    link.addEventListener('mouseout', decoloringHandler);
});

function coloringHandler() {
    this.dataset.initialInlineColor = this.style.color;
    this.style.color = 'red';
}

function decoloringHandler() {
    this.style.color = this.dataset.initialInlineColor;
}

    <nav>
      <ul>
        <li><a href="home.html">Home </a></li>
        <li><a href="about.html"> About </a></li>
        <li><a href="experience.html"> Experience </a></li>
        <li><a href="contact.html"> Contact </a></li>
      </ul>
    </nav>

• Use event delegation which consists of attaching the listeners on a container element and rely on event bubbling or capturing to handle children events (note that this event delegation implementation is naïve).

var nav = document.querySelector('nav');

nav.addEventListener('mouseover', withLinkEl(coloringHandler));
nav.addEventListener('mouseout', withLinkEl(decoloringHandler));

function coloringHandler() {
  
  this.dataset.initialInlineColor = this.style.color;
  this.style.color = 'red';
}

function decoloringHandler() {
  this.style.color = this.dataset.initialInlineColor;
}

function withLinkEl(fn) {
  return function (e) {
    if (e.target.tagName !== 'A') return;
    
    fn.call(e.target);
  };
}

<nav>
  <ul>
    <li><a href="home.html">Home </a></li>
    <li><a href="about.html"> About </a></li>
    <li><a href="experience.html"> Experience </a></li>
    <li><a href="contact.html"> Contact </a></li>
  </ul>
</nav>

Answer 2

Here it is using javascript https://jsfiddle.net/5egjjv91/

<nav>
  <ul>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="home.html">Home </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="about.html"> About </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="experience.html"> Experience </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="contact.html"> Contact </a></li>
  </ul>
</nav>
<script>
  function changeTo(x) {
    x.style.backgroundColor = "red";
  }

  function changeBack(x) {
    x.style.backgroundColor = "white";
  }

</script>