jQuery中的hover()方法

54 阅读 0 评论 36 点赞

我是靠谱客的博主儒雅宝马，最近开发中收集的这篇文章主要介绍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')。