jQuery:鼠标悬停 DIV 效果

Question

对于我的问题的新颖性表示歉意，我仍在习惯 jQuery。我想做最简单的效果。我在很多不同的网站上看到过这一点。基本上就是当鼠标悬停在电子邮件上时，文本会出现在其上方。

我尝试使用 jsFiddle 制作一些东西，但它的行为根本不符合我的预期。不过，您可以看到我想要的效果:http://jsfiddle.net/5dyrJ/

$(function() {
    $('#main').on("mouseover", function (){
        $("#slider").animate({"right":"-30%"}, "slow");
    }).on("mouseout", function (){
        $("#slider").animate({"right":"-99%"}, "fast");
    });
});

有人可以解释一下如何有效地获得这种效果吗？

Answer 1

问题:

您当前出现问题的原因是 mouseover()/mouseout()将在进入/离开子元素时触发。

解决方案:

您可以使用mouseenter()和 mouseleave()在这种情况下(或简写 hover() ):

$(function() {
    $('#main').on("mouseenter", function (){
        $("#slider").animate({"right":"-30%"}, "slow");
    }).on("mouseleave", function (){
        $("#slider").animate({"right":"-99%"}, "fast");
    });
});

Your jsFiddle here.

为什么会这样？

这是有效的，因为进入/离开子元素时不会触发 mouseenter()/mouseout() 。 Here is a great example jsFiddle显示 mouseover/mouseenter 之间的差异。

另请注意，正如 @adeneo 在他的 jsFiddle 中所示，您的示例实际上可以仅使用 CSS 组合 transitions 来完成。和 :hover状态。