1

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

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

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

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

谢谢

4

2 回答 2

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)动画效果之前链接以停止任何先前排队的动画并跳转到最后一个排队动画的末尾。

于 2013-02-20T15:05:09.887 回答
0

你可以使用这个语句

$(".mask",this).fadeIn();
于 2013-02-20T15:08:19.650 回答