使用jquery选择一个Wordpress主题的主要导航

Question

你好人的计算器。我有个问题。我试图设置我的Wordpress网站，以便当我将鼠标悬停在主要导航元素上时，图标将在任何链接旁边淡入。

我已经在部分工作中淡入淡出，但似乎当我将鼠标悬停在“关于我”部分上时，页脚上的链接也会显示与其关联的图标。

我只是想知道如何才能精确选择顶部导航栏内的导航元素。

TL;博士

我需要做的jQuery只需选择主导航ID内的某一类。

这里。看看我的代码：

<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> 

，然后在此刻的jQuery：

//------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); } 
); 

在此先感谢。

Answer 1

简短的回答。 jQuery有一个选择器'：first'，它会选择dom中第一个出现的项目。所以，这只应该淡入第一个图标：

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