jpressを使用してWordpressテーマのメインナビだけを選択する

Question

こんにちはpeople of stackoverflow。私は問題があります。私はWordpressのウェブサイトを立ち上げようとしているので、メインのnav要素の上にマウスを置くと、リンクが何であれ次のアイコンが消えてしまいます。

フェードがうまく機能していますが、「About Me」セクションにマウスを重ねると、フッターのリンクには、その隣に表示されているアイコンも表示されるように見えます。

上のナビゲーションバー内のnav要素だけを正確に選択する方法は不思議です。

TL; DR

私は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には、domの項目の最初の出現を選択するセレクタ「：first」があります。だから、これは最初のアイコンで消えるべきです：

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