javascript - jQuery 悬停 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();
    })
}

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