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之间的差异。

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

Answer 2

尝试使用.hover()

描述：描述：将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开时执行元件。

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

JSFiddle

Answer 3

试试这个：

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

希望这有帮助！

jQuery：Mouseover DIV效果

3 个答案: