Question

Hello people of stackoverflow. I have a problem. I’m trying to set up my WordPress website so that when I hover over the main-nav elements an icon will fade in next to whatever the link is.

I got the fade in part working, but it appears that when I hover over, say, the “About Me” section, the link at the footer will also have the icon associated with it appear next to it.

I’m just wondering how I can exactly select just the nav elements within the top nav bar.

tl;dr

I need to make jquery just select a certain class within the main-nav id.

Here. Look at my code:

   <div id="nav">
        <div id="navstart"></div>
    <div id="navbar">
    <nav id="main-nav" class="horiz-list" role="navigation">
        <div class="menu">
<ul>
     <li class="page_item page-item-5"><a href="http://bjcasillas.com/about/"><img src="http://bjcasillas.com/wp-content/uploads/icons/icons_01.png" class="page_icon" alt="About">About</a></li>
     <li class="page_item page-item-8"><a href="http://bjcasillas.com/blog/"><img src="http://bjcasillas.com/wp-content/uploads/icons/icons_05.png" class="page_icon" alt="Blog">Blog</a></li>
     <li class="page_item page-item-6"><a href="http://bjcasillas.com/contact/"><img src="http://bjcasillas.com/wp-content/uploads/icons/icons_03.png" class="page_icon" alt="Contact">Contact</a></li>
     <li class="page_item page-item-10"><a href="http://bjcasillas.com/works/"><img src="http://bjcasillas.com/wp-content/uploads/icons/icons_07.png" class="page_icon" alt="Works">Works</a></li>
</ul>
          </div>
    </nav>
    </div>
    </div>

And then for the jquery at the moment:

//------Icon Fades------
$(".page_icon").hide().end();

$("#main-nav.page_item.page-item-5").hover(function () {
    $(".page-item-5 img").fadeIn(300);
  }, function () {
    $(".page_icon").fadeOut(300); }
);

$(".page_item.page-item-8").hover(function () {
    $(".page-item-8 img").fadeIn(300);
  }, function () {
    $(".page_icon").fadeOut(300); }
);

$(".page_item.page-item-6").hover(function () {
    $(".page-item-6 img").fadeIn(300);
  }, function () {
    $(".page_icon").fadeOut(300); }
);

$(".page_item.page-item-10").hover(function () {
    $(".page-item-10 img").fadeIn(300);
  }, function () {
    $(".page_icon").fadeOut(300); }
);

Thanks in advance.

Answer 1

The short answer. jQuery has a selector ‘:first’ that will select the first occurrence of an item in the dom. So, this should only fade in the first icon:

$(".page-item-6:first img").fadeIn();