jQuery Hover mouseenter mouseleave

Question

我正在尝试使用此脚本执行悬停效果：

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

问题在于，当我将鼠标悬停在任何项目上时，它会在所有的.mask中淡入淡出，如何指向该函数以仅处理正在悬停的项目？

此外，当我快速地将鼠标放入和移出项目时，淡入淡出效果会变得疯狂，就像它不会停止，然后它会在一段时间后停止，为什么会这样？

感谢

Answer 1

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

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

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

Answer 2

您可以使用此声明

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