jQuery中的hover()方法

最新推荐文章于 2024-06-22 08:09:44 发布

雅痞子军

最新推荐文章于 2024-06-22 08:09:44 发布

阅读量8.7k

点赞数 2

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_1724201421/article/details/79954201

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery中的hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter），当光标移出这个元素时，会触发指定的第二个函数（leave）。如下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery中的hover()方法</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>
   <script>
       $(function(){
          $('#panel').hover(function(){
              $(this).next.show();
          },function(){
              $(this).next.hide();
          });
       });
   </script>
</body>
</html>

代码运行后的效果和下面代码运行后的效果是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery中的hover()方法</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>
   <script>
       $(function(){
          $('#panel').mouseover(function(){
              $(this).next.show();
          }).mouseout(function(){
              $(this).next.hide();
          });
       });
   </script>
</body>
</html>

注意：（1）CSS中有伪类选择符，例如‘：hover’，当用户光标悬停在元素上时，会改变元素的外观。在大多数符合规范的浏览器中，伪类选择符可以用于任何元素。然而在IE6浏览器中，类选择符仅可用于超链接元素。对于其他元素，可以使用jQuery的hover()方法。

(2) hover()方法准确的来说是替代了jQuery中的bind('mouseenter')和bind('mouseleave'),而不是替代bind('mouseover')和bind('mouseout')。因此当需要触发hover()方法的第二个函数时，需要用trigger('mouseleave')来触发，而不是trigger('mouseout')。

雅痞子军

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
jQuery中的hover()方法

jQuery中的hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter），当光标移出这个元素时，会触发指定的第二个函数（leave）。如下面一段代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;tit
复制链接

扫一扫

专栏目录