title: Javascript Hover-highlight List Items
body: <p>Basically, I have a <code>&lt;nav&gt;</code> element with an <code>&lt;ul&gt;</code> 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?</p>
  <p>my nav:</p>
  <pre><code>         &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt; About &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;experience.html&quot;&gt; Experience &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt; Contact &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  <p>(Minus a form input submitting to a post page)</p>
  <p>Additionally, I would like to get this working all within my js file, but I couldn't get that working in W3.</p>
  <hr />
  <h1>EDIT</h1>
  <p>I apologize for the poor post and method of supplying code.</p>
  <p>Now, I've developed a solution based on the reply from @Adam-Buchanan-Smith :</p>
  <pre><code>&lt;nav&gt;
        &lt;ul&gt;
             &lt;li onmouseover=&quot;hover(this)&quot; onmouseout=&quot;hoverOff(this)&quot;&gt;&lt;a href=&quot;home.html&quot;&gt;Home &lt;/a&gt;&lt;/li&gt;
             &lt;li onmouseover=&quot;hover(this)&quot; onmouseout=&quot;hoverOff(this)&quot;&gt;&lt;a href=&quot;about.html&quot;&gt; About &lt;/a&gt;&lt;/li&gt;
             &lt;li onmouseover=&quot;hover(this)&quot; onmouseout=&quot;hoverOff(this)&quot;&gt;&lt;a href=&quot;experience.html&quot;&gt; Experience &lt;/a&gt;&lt;/li&gt;
             &lt;li onmouseover=&quot;hover(this)&quot; onmouseout=&quot;hoverOff(this)&quot;&gt;&lt;a href=&quot;faq.html&quot;&gt; FAQ &lt;/a&gt;&lt;/li&gt;
             &lt;li onmouseover=&quot;hover(this)&quot; onmouseout=&quot;hoverOff(this)&quot;&gt;&lt;a href=&quot;references.html&quot;&gt; References &lt;/a&gt;&lt;/li&gt;
             &lt;li onmouseover=&quot;hover(this)&quot; onmouseout=&quot;hoverOff(this)&quot;&gt;&lt;a href=&quot;contact.html&quot;&gt; Contact &lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>function hover(element)
  {
      element.style.backgroundColor = &quot;red&quot;;
  }
  function hoverOff(element)
  {
      element.style.backgroundColor = &quot;#000079&quot;;
  }
  </code></pre>
  <p>it seems to work, but can someone please explain why/how JS 'uses</p>
  <blockquote>
  <p>style.backgroundColor</p>
  </blockquote>
  <p>To change the color, while CSS uses:</p>
  <blockquote>
  <p>background-color:</p>
  </blockquote>
  <h2>JavaScript Usage Rational</h2>
  <p>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.</p>