.hover()
返回: jQuery
.hover( handlerIn, handlerOut )
描述：给匹配的元素绑定一个或现金个处理函数，在鼠标指针进入这个元素、鼠标指针离开这个元素的时候执行它们。
加入于: 1.0
.hover( handlerIn, handlerOut ).hover()方法对mouseenter事件和mouseleave事件绑定处理函数。你可以利用它，在鼠标处于元素内部的时候，向一个元素简单应用行为。
调用$( selector ).hover( handlerIn, handlerOut)是下面代码的简写：
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
参见对.mouseenter()和.mouseleave()的讨论以了解更多细节。
示例
向鼠标悬停的列表项添加专有的样式，试一试：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class="fade">Chips</li>
<li class="fade">Socks</li>
</ul>
<script>
$( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
</script>
</body>
</html>
演示结果
向鼠标悬停地表格单元格添加专有的样式，试一试：
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
用以下代码解绑上面的示例：
$( "td" ).off( "mouseenter mouseleave" );
返回: jQuery
.hover( handlerIn, handlerOut )
描述：向匹配的元素绑定一个处理函数，在鼠标指针进入元素或离开元素时执行它。
加入于: 1.4
.hover( handlerInOut ).hover()方法，当向它传递了一个函数时，将对mouseenter事件和mouseleave事件都执行这个函数。这允许用户在处理函数内部使用jQuery的多种切换方法，或者在处理函数内部根据event.type的不同，作出不同的响应。
调用$(selector).hover(handlerInOut)是以下代码的简写：
$( selector ).on( "mouseenter mouseleave", handlerInOut );
参见对.mouseenter()和.mouseleave()的讨论以了解更多细节。
示例
在悬停上，向上或向下滑移下一个同辈元素<li>，并且切换样式类。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
li.active {
background: black;
color: white;
}
span {
color:red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>White</li>
<li>Carrots</li>
<li>Orange</li>
<li>Broccoli</li>
<li>Green</li>
</ul>
<script>
$( "li" )
.filter( ":odd" )
.hide()
.end()
.filter( ":even" )
.hover(function() {
$( this )
.toggleClass( "active" )
.next()
.stop( true, true )
.slideToggle();
});
</script>
</body>
</html>
演示结果