jquery - 如何仅将效果应用于悬停的元素？

Question

当我将鼠标悬停在单个列表项上时，所有其余列表项都会显示效果。我想显示对单个列表项的效果。

这是代码:

<script>    
    $(document).ready(function(){
        $('.thumbs li a').hover( function(){
            $('.thumbs li a').find('div').css({'opacity':'1'});
            },
            function(){
            $('.thumbs li a').find('div').css({'opacity':'0'});
            });
    });    
</script>

 <div id="thumbs-wrapper">
 <ul class="thumbs">
 <li> <a href="#"><img src="images/Adrian_Shaughnessy-325x325.png" />
  <div><h2> This is image 1</h2> </div></a> 
  </li>
 <li><a href="#"><img src="images/allan_yu-325x325.jpg" />
<div><h2> This is image 2</h2> </div></a>
  </li>
 <li><a href="#"><img src="images/armin_vit_secrethandshake-325x325.jpg" />
<div><h2> This is image 3</h2> </div></a>
  </li>
 <li><a href="#"><img src="images/bburwell_Tsh-325x325.jpg" />
<div><h2> This is image 4</h2> </div></a>
  </li>
 <li><a href="#"><img src="images/beverly_fresh_2-325x325.jpg" />
<div><h2> This is image 5</h2> </div></a>
  </li>

      </ul>
 </div>

Answer 1

使用 $(this) 而不是 $('.thumbs li a') 在源 元素中查找 div 触发事件而不是选择器$('.thumbs li a')返回的所有元素。

$(document).ready(function(){
        $('.thumbs li a').hover( function(){
            $(this).find('div').css({'opacity':'1'});
        },
        function(){
            $(this).find('div').css({'opacity':'0'});
        });
});