jQuery jquery悬停鼠标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1116361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery hover mouse out
提问by Stuart Robson
I want a simple slide down / up animation on a mouse over of a link. I can get the mouse over to work but I can't work out how to get the mouseout to do it's thing.
我想要一个简单的在鼠标悬停在链接上的向下/向上滑动动画。我可以让鼠标移过去工作，但我不知道如何让鼠标移开来做这件事。
Here's what I have for the hover effect:
这是我对悬停效果的看法：
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery
google.setOnLoadCallback(function() {
jQuery(
function($) {
$("a.button").hover(function(){$(this).animate({"marginTop": "0px"}, "fast")
});
});
});
</script>
How do I get this to move the margin up 16px when mouse out?
如何在鼠标移开时将边距向上移动 16px？
回答by Philippe Leybaert
The hover event in jQuery needs 2 callback functions: one when the pointer moves over the item, and one when it leaves:
jQuery 中的悬停事件需要 2 个回调函数：一个是当指针移动到项目上时，一个是在它离开时：
$(item).hover(function() { ... }, function() { ... });
In your case:
在你的情况下：
$("a.button").hover(
function() {
$(this).animate({"marginTop": "0px"}, "fast");
},
function() {
$(this).animate({"marginTop": "16px"}, "fast");
}
);
回答by Heath
In newer versions of jQuery (>=1.7) you can also take this approach:
在较新版本的 jQuery (>=1.7) 中，您也可以采用这种方法：
$("a.button").on('mouseenter',function(){
$(this).animate({"marginTop": "0px"}, "fast");
});
$("a.button").on('mouseleave',function(){
$(this).animate({"marginTop": "16px"}, "fast");
});
In my opinion this is a cleaner approach, and it also takes advantage of the the new .on() function (documentation here)
在我看来，这是一种更简洁的方法，并且还利用了新的 .on() 函数（此处为文档）
回答by Kuharski
Simpler solution:
更简单的解决方案：
$("a.button").hover(function() {
$("a.button").css("cursor","pointer");
});
