javascript - jQuery .hover only working on first li in my nav bar? -
in following code using id="nav-button" on hover create console.log can check if 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 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 so:
$( document ).ready(function() { $("#nav-button").hover( function(){ console.log('done'); }); });
for reason first link responds on hover. others don't anything.
can't have more 1 item same id, they're not unique if do. change 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 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 js:
$( document ).ready(function() { $(".nav-button").hover( function(){ console.log('done'); }); });
here's fiddle demonstrating it: http://jsfiddle.net/uqyhd/
Comments
Post a Comment