1

为我的问题的新奇道歉，我仍然习惯 jQuery。我想做最简单的效果。我在很多不同的网站上都看到过。基本上，当鼠标悬停在电子邮件上时，文本会出现在其上方。

我尝试使用 jsFiddle 制作一些东西，但它的行为完全不像我期望的那样。不过，您可以看到我想要的效果：http: //jsfiddle.net/5dyrJ/

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

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

4

3 回答 3

3

问题：

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

解决方案：

在这种情况下，您将使用mouseenter()and mouseleave()（或简写hover()）：

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

你的jsFiddle在这里。

为什么这行得通？

这是因为mouseenter()/mouseout()在进入/离开子元素时不会触发。这是一个很好的例子 jsFiddlemouseover显示/之间的差异mouseenter。

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

于 2013-07-12T19:27:53.613 回答
1

尝试使用.hover()

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

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

JSFiddle

于 2013-07-12T19:32:43.193 回答
0

尝试这个：

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

希望这可以帮助！

于 2013-07-12T19:31:59.020 回答