Question

我希望鼠标悬停在链接上的简单向下滑动动画。我可以让鼠标上班，但是我无法弄清楚如何让mouseout做这件事。

这就是我对悬停效果的看法：

<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>

如何在鼠标移出时将此余量向上移动16px？

Answer 1

jQuery中的悬停事件需要2个回调函数：一个指针在项目上移动时，一个在它离开时：

$(item).hover(function() { ... }, function() { ... });

在你的情况下：

$("a.button").hover(
   function() {
      $(this).animate({"marginTop": "0px"}, "fast");
   },
   function() {
      $(this).animate({"marginTop": "16px"}, "fast");
   }
);

Answer 2

在较新版本的jQuery（＆gt; = 1.7）中，您也可以采用这种方法：

$("a.button").on('mouseenter',function(){
  $(this).animate({"marginTop": "0px"}, "fast");
});
$("a.button").on('mouseleave',function(){
  $(this).animate({"marginTop": "16px"}, "fast");
});

在我看来，这是一种更清洁的方法，它也利用了新的.on（）函数（documentation here）

Answer 3

更简单的解决方案：

$("a.button").hover(function() {
  $("a.button").css("cursor","pointer");
});

jquery将鼠标悬停在外面

3 个答案: