Jquery 如何仅对悬停的元素应用效果？

当我将鼠标移到单个列表项上时，效果将显示在所有其他列表项上。我想在单个列表项上显示效果

代码如下：

<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>

$（文档）.ready（函数（）{
$（'.thumbs li a'）。悬停（函数（）{
$（'.thumbs li a'）.find（'div'）.css（{'opacity'：'1'）；
},
函数（）{
$（'.thumbs li a'）.find（'div'）.css（{'opacity'：'0'}）；
});
});    

使用

$（this）

而不是

$（'.thumbs li a'）

来查找触发事件的源

元素中的
div
，而不是选择器返回的所有元素
$（'.thumbs li a'）

使用
$（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'
        });
    });
});


$（'.thumbs li a'）.find（'div'）
获取所有锚点中的所有div
$（this）.find（'div'）
将仅获取当前悬停的锚点内的特定div
您可以这样做：

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


$（'.thumbs li a'）.find（'div'）
获取所有锚点中的所有div
$（this）.find（'div'）
将仅获取当前悬停的锚点内的特定div
你可以这样试试

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

你可以这样试试

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