如何在jQuery中定位更早的非同級元素？

Question

我有以下HTML：

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

當我鼠標懸停figcaption內h3，我想改變figure內的圖像class=overlay上的不透明度。好傢伙，這肯定是簡單的，但我一直在做我的螺母在試圖

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

，改變最接近後退，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/。一般來說，您只需瀏覽該類別即可找到要使用的正確的遍歷函數組合。