使用jQuery淡入内部导航按钮

Question

我在一个无序列表中的页面上有一系列的照片。我想将鼠标悬停在一张照片上，使向上/向下箭头淡入，然后单击其中一个箭头以向上/向下转到下一张照片。

除了当我将鼠标悬停在照片上时，向上/向下箭头出现在每张照片上之外，它都能正常工作。我希望箭头只出现在我实际悬停的照片上。

以下是到目前为止的代码：

$('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>

Answer 1

将您的代码更改为：

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

这将获取您当前悬停在其上的li，并在该特定li中仅找到该nav，并且仅对该li进行动画处理。