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')查找，而不是在选择器返回的所有元素中查找。divelement$('.thumbs li a')

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

Answer 2

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

Answer 3

你可以这样做：

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

Answer 4

你可以试试这样

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