如何在jQuery中定位早期的非兄弟元素？

Question

我有以下HTML：

<ul>
    <li>
       <figure>
           <img class="overlay" src="...">
       </figure>
       <figcaption>
           <h3><a href="...">Text</a></h3>
       </figcaption>
   </li>
</ul>

当我将鼠标悬停在h3内的figcaption时，我想改变class=overlay内图片figure的不透明度。好主，当然这很简单，但我一直在努力尝试

$('h3 a').mouseover(function(){
 $(this).closest('.overlay').css('opacity',1);
});

并且更接近prev，prevAll等，都没有成功。欢乐会遇到任何帮助！

Answer 1

您可以使用以下方法

$('h3 a').mouseover(function(){
 $(this).closest('li').find('figure .overlay').css('opacity',1);
});

http://api.jquery.com/category/traversing

Answer 2

我会用：

$(this).closest('li').find('.overlay');

请参阅：http://api.jquery.com/category/traversing/。一般来说，您只需浏览该类别即可找到要使用的正确遍历函数组合。