Использование jquery для выбора только основной навигации по теме Wordpress

Question

Привет люди из stackoverflow.У меня проблема.Я пытаюсь настроить свой веб-сайт Wordpress таким образом, чтобы при наведении указателя мыши на элементы главной навигации рядом с той или иной ссылкой появлялся значок.

Я частично включил затухание, но кажется, что при наведении курсора на раздел «О себе», ссылка на нижний колонтитул также будет иметь значок, связанный с ним, рядом с ним.

Мне просто интересно, как я могу точно выбрать только элементы навигации в верхней навигационной панели.

tl; dr

Мне нужносделайте jquery просто выберите определенный класс в идентификаторе main-nav.

Здесь.Посмотрите на мой код:

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