这在jquery函数中不起作用

我的页面上有某些项目。当有人悬停某个项目时，我希望该项目上有一个覆盖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>

$（document）.on（“mouseenter”，“.item”，function（））{
$（this）。（'.item overlay'）.stop（）.fadeTo（250,1）；
});
$（document）.on（“mouseleave”，“.item”，function（））{
$（this）。（'.item overlay'）.stop（）.fadeTo（250,0）；
});

HTML:

测试

这是：

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

}))

需要的“子项”

请尝试以下脚本：

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

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

我刚刚删除了$（这个）

---

希望它有助于

$（我认为这是一个）参考文档..要对这个解决方案进行评论，您需要将代码放在页面底部，或者使用这种类型的解决方案，它是jquerys ready函数的一个简短形式，在中找到，它在执行之前等待页面加载。@FanFanFavorite-您没有注意到DOM就绪函数吗？它一直都在那里，完全符合您的评论？我知道，我只是用您的解决方案向用户解释了更多内容。：）@fanfavorite-哦，好吧，只是习惯于偷窥指出错误，直到我再次阅读它时才意识到这是一种解释。谢谢你：）！！此代码将淡出所有具有类项目覆盖的项目，而不是与项目关联的元素。检查此小提琴：由于位置原因，框仅位于顶部！

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

 $(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);
});

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

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