jQuery hover()
时间：2020-02-23 14:46:09 来源:igfitidea点击:
当鼠标指针进入并离开选定HTML元素时，将触发jQuery hover()函数。
jQuery悬停功能将附加两个事件处理程序，以在鼠标进入和离开元素时执行。
jQuery悬停
hover()方法为鼠标进入和鼠标离开事件附加处理程序。
使用hover()的语法：
- 悬停(handlerIn，handlerOut)
当鼠标进入html元素时，将执行handlerIn函数；当鼠标离开该元素时，将执行handlerOut函数。
- 悬停(handlerInOut)
使用此方法，您可以附加一个处理程序–" handlerInOut"，该处理程序将与鼠标enter和鼠标离开事件一起执行。
此函数是$(选择器).on(" mouseenter mouseleave"，handlerInOut);"的简写形式。
jQuery悬停示例
下面的示例演示jQuery hover()函数的用法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery hover</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").hover(
function() {
$( this ).append( $( " : Now You are a Super *" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);
});
</script>
<style>
.divClass1
{
padding:5px;
text-align:center;
background-color:yellow;
border:solid 1px;
}
span {
color: red;
}
</style>
</head>
<body>
<div class="divClass1">Enter theitroad</div>
</body>
</html>
在此示例中，您可以看到hover()函数附加了两个处理程序– append()方法是输入元素时执行的函数，它将附加一个<span>元素。
当您离开元素时，find()方法会找到<span>元素，并将其从父元素中删除，该父元素在本示例中为<div>元素。
