jquery鼠标悬停

Posted 2023-05-08

【中文标题】jquery鼠标悬停

【英文标题】：jquery hover mouse out

【发布时间】：2010-11-10 02:57:29

【问题描述】：

我希望鼠标悬停在链接上时有一个简单的向下/向上滑动动画。我可以让鼠标悬停工作，但我不知道如何让鼠标悬停来做这件事。

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

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

如何在鼠标移出时将边距向上移动 16 像素？

【问题讨论】：

示例中的代码无效！也许您错过了.hover(func, func) 的第二个功能？

【参考方案1】：

jQuery中的hover事件需要2个回调函数：一个是指针移到item上，一个是离开：

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

在你的情况下：

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

【参考方案2】：

在较新版本的 jQuery (>=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)

【参考方案3】：

更简单的解决方案：

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