jQuery中的hover()方法

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')。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页