jQuery .hover only working on first li in my nav bar? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question does not appear to be about programming within the scope defined in the help center.

Closed 8 years ago.

Improve this question

In the following code I am using the id="nav-button" on hover to create a console.log so i can check if its working.

    <ul>                        <!-- Main Navigation -->
      <li ><a id="nav-button" href="welcome/about">ABOUT</a></li>
      <li ><a id="nav-button" href="search-listings">SEARCH LISTINGS</a></li>
      <li ><a id="nav-button" href="featured">FEATURED</a></li>
      <li ><a id="nav-button" href="sell-your-home">SELL YOUR HOME</a></li>
      <li ><a id="nav-button" href="welcome/press">PRESS</a></li>
      <li ><a id="nav-button" href="welcome/contact">CONTACT</a></li>
    </ul>

My JavaScript looks like so:

$( document ).ready(function() {
    $("#nav-button").hover(
        function(){
            console.log('done');
        });
});

For some reason only my first link responds to the on hover. The others don't do anything.

Answer 1

Can't have more than 1 item with the same ID, they're not very unique if you do. Change your HTML to:

<ul>                        <!-- Main Navigation -->
  <li ><a class="nav-button" href="welcome/about">ABOUT</a></li>
  <li ><a class="nav-button" href="search-listings">SEARCH LISTINGS</a></li>
  <li ><a class="nav-button" href="featured">FEATURED</a></li>
  <li ><a class="nav-button" href="sell-your-home">SELL YOUR HOME</a></li>
  <li ><a class="nav-button" href="welcome/press">PRESS</a></li>
  <li ><a class="nav-button" href="welcome/contact">CONTACT</a></li>
</ul>

And the JS:

$( document ).ready(function() {
    $(".nav-button").hover(
        function(){
            console.log('done');
        });
});

Here's a fiddle demonstrating it: http://jsfiddle.net/UqyHD/

Answer 2

ID is supposed to be unique, so you cannot have id="nav-button" appears more than once. What you could do is assigned id to the ul tag like below

<ul id="nav-buttons">                        <!-- Main Navigation -->
  <li ><a href="welcome/about">ABOUT</a></li>
  <li ><a href="search-listings">SEARCH LISTINGS</a></li>
  <li ><a href="featured">FEATURED</a></li>
  <li ><a href="sell-your-home">SELL YOUR HOME</a></li>
  <li ><a href="welcome/press">PRESS</a></li>
  <li ><a href="welcome/contact">CONTACT</a></li>
</ul>

then, you may refers them as "#nav-buttons a"

$( document ).ready(function() {
    $("#nav-buttons a").hover(
        function(){
            console.log('done');
    });
});

Answer 3

Html:

<ul>                       
  <li ><a class="nav-button" href="welcome/about">ABOUT</a></li>
  <li ><a class="nav-button" href="search-listings">SEARCH LISTINGS</a></li>
  <li ><a class="nav-button" href="featured">FEATURED</a></li>
  <li ><a class="nav-button" href="sell-your-home">SELL YOUR HOME</a></li>
  <li ><a class="nav-button" href="welcome/press">PRESS</a></li>
  <li ><a class="nav-button" href="welcome/contact">CONTACT</a></li>
</ul>

Javascript

$( document ).ready(function() {
    $("a.nav-button").hover(
        function(){
            console.log('done');
        });
});

When you find an element by ID it will parse the DOM until it finds the first element with that ID. $("a.nav-button") will select all the elements with that class.