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