使用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();