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中的element，而不是选择器{返回的所有元素{ {1}}。

$('.thumbs li a')

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'});
            });
});

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

4 个答案: