jQuery Hover mouseenter mouseleave

Question

我正在尝试使用此脚本制作悬停效果：

function itemhover(){
    $(".item").mouseenter(function(){
        $(".mask").fadeIn();
    })
    $(".item").mouseleave(function(){
        $(".mask").fadeOut();
    })
}

问题是，当我将鼠标悬停在任何项目上时，它会在所有的 .mask 中消失，我如何才能将函数指向只在悬停的项目上工作？

另外，当我在项目上快速进出鼠标时，淡入淡出效果变得疯狂，就像它没有停止，然后过了一会儿就停止了，这是为什么呢？

谢谢

Answer 1

听起来您的 .mask 元素包含在您的 .item 元素中。如果是这种情况，那么您可以使用$(this) 来“设置”被悬停的项目的范围（this 指的是被悬停的项目）。

function itemhover(){
    $(".item").mouseenter(function(){
        $(this).find(".mask").stop(true, true).fadeIn();
    })
    $(".item").mouseleave(function(){
        $(this).find(".mask").stop(true, true).fadeOut();
    })
}

此外，您可能希望在 fade 动画效果之前链接 .stop(true, true) 以停止任何先前排队的动画并跳转到最后一个排队动画的末尾。

Answer 2

你可以使用这个语句

$(".mask",this).fadeIn();