jquery - 这在 jquery 函数中不起作用

Question

我的页面上有某些项目。当有人悬停一个项目时，我想要一个覆盖该项目的 div。如果我使用没有 的函数，这是有效的$(this)，但是它会覆盖所有项目。我只想覆盖我当时悬停的项目。

我的代码：

jQuery：

<script>
  $(document).on("mouseenter", ".item" , function() {
    $(this).('.item-overlay').stop().fadeTo(250, 1);
  });
  $(document).on("mouseleave", ".item" , function() {
    $(this).('.item-overlay').stop().fadeTo(250, 0);
  });
</script>

HTML：

<div class="item">
  <a href="#"><img src="<?=$row['item_pic']?>" class="item-img"></a>
  <div class="item-overlay" style="background:#999; display: none; position:absolute; top:0px; left: 0px; width:400px; height:200px; z-index:900;">test</div>
</div>

Answer 1

这个：

$(this).('.item-overlay')

无效，应该是：

$(this).find('.item-overlay')

总共：

<script type="text/javascript">
$(function() {
    $(document).on({
        mouseenter: function() {
            $(this).find('.item-overlay').stop().fadeTo(250, 1);
        },    
        mouseleave: function() {
            $(this).find('.item-overlay').stop().fadeTo(250, 0);
        }
    }, '.item');
});
</script>

只是为了好玩，这是一个较短的版本：

$(function() {
  $(this).on('mouseenter mouseleave', '.item', function(e) {
    $(this).find('.item-overlay')[e.type=='mouseenter'?'fadeIn':'fadeOut'](250);
  });
});

Answer 2

试试这个脚本：

$(document).on("mouseenter", ".item" , function() {
    $('.item-overlay').stop().fadeTo(250, 1);
});

$(document).on("mouseleave", ".item" , function() {
    $('.item-overlay').stop().fadeTo(250, 0);
});

我刚刚删除了 $(this)

希望它有所帮助

Answer 3

 $(function() {
$(document).on("mouseenter", ".item" , function() {
    $(this).children('.item-overlay').stop().fadeTo(250, 1);
});

$(document).on("mouseleave", ".item" , function() {
    $(this).children('.item-overlay').stop().fadeTo(250, 0);
});

});

需要“孩子”