Исчезновение внутренних кнопок навигации с помощью jQuery - PullRequest
Новая
       22

Исчезновение внутренних кнопок навигации с помощью jQuery

0 голосов
/ 01 ноября 2011

У меня есть серия фотографий на странице в неупорядоченном списке. Я хочу навести курсор на фотографию, чтобы на ней появились стрелки вверх / вниз, а затем нажать на одну из стрелок, чтобы перейти вверх или вниз к следующей фотографии.

Это работает за исключением того, что когда я наведу курсор на фотографию, стрелки вверх / вниз появляются на каждой фотографии. Мне бы хотелось, чтобы стрелки появлялись только на той фотографии, на которой я на самом деле завис.

Вот код на данный момент: 

$('section li').hover(function() {
   $('section nav').fadeIn();
},
function() {
   $('section nav').fadeOut();
});

<section>
   <ul>
      <li id="photo-0">
         <img src="img.png" />
         <nav>
            <a class="down" href="#photo-1">down</a>
         </nav>
      </li>
      <li id="photo-1">
         <img src="img.png" />
         <nav>
            <a class="down" href="#photo-2">down</a>
            <a class="up" href="#photo-0">up</a>
         </nav>
      </li>
   </ul>
</section>

1 Ответ

2 голосов
/ 01 ноября 2011

Измените свой код на это: 

$('section li').hover(function() {
   $(this).find('nav').fadeIn();
},
function() {
   $(this).find('nav').fadeOut();
});

Это займет li, который вы в данный момент зависаете, и обнаружит только nav в этом конкретном li и только оживит его.

...