jQuery：鼠标悬停DIV效果

道歉为我的问题的新手，我仍然习惯于jQuery。我希望做最简单的效果。我在很多不同的网站上看到的一个。基本上只是当鼠标悬停在电子邮件上时，文本出现在其上方。jQuery：鼠标悬停DIV效果

我试图做一些使用jsFiddle的东西，但它并不像我期望的那样行事。你可以看到效果，我去为，虽然：http://jsfiddle.net/5dyrJ/

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

能有人请解释如何有效地获得这种效果呢？

来源

2013-07-12 Chuck Le Butt

下面是如何 - > http://jsfiddle.net/5dyrJ/2/ – adeneo

或者没有的JavaScript在所有 - > http://jsfiddle.net/5dyrJ/5/ – adeneo

@ adeneo，+1纯CSS解决方案 – KyleMit

问题：

您当前的问题的原因是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来完成。

来源

2013-07-12 19:27:53 lifetimes

啊，谢谢。是否因为出现'＃滑动条'时鼠标指针不是“over”'＃main'？ –

@DjangoReinhardt希望该更新有助于:) – lifetimes

辉煌，谢谢。我会记住未来。 –

试试这个：

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

希望这有助于！

来源

2013-07-12 19:31:59

尝试使用.hover()

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

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

JSFiddle

来源

2013-07-12 19:32:43 Praveen

jQuery：鼠标悬停DIV效果

回答

相关问题