jQuery hover()
方法用于在鼠标悬停在元素上时绑定一个或多个事件处理程序。该方法类似于jQuery on()
方法,但是它只鼠标悬停在元素上时触发事件处理程序。
以下是jQuery hover()
方法的详细攻略:
语法
$(selector).hover(handlerIn, handlerOut)
参数
selector
:必需,用于选择要绑定事件的元素。handlerIn
:必需,用于指定鼠标悬停在元素上时要绑定的事件处理程序。handlerOut
:可选,用于指定鼠标离开素时要绑定的事件处理程序。
示例1:绑定鼠标悬停事件
以下示例示了如何使用jQuery hover()
方法绑定鼠标悬停事件:
<!DOCTYPE html>
<html>
<head>
<title>jQuery hover() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">Hover over me</div>
<script>
$('#myDiv').hover(function() {
$(this).css('background-color', 'yellow');
});
</script>
</body>
</html>
在上述示例中,我们创建了一个div
元素,并使用jQuery hover()
方法绑定了一个事件程序。在事件处理程序中我们使用jQuery css()
方法将元素的背景颜色更改为黄色。
示例2:绑定鼠标悬停和离开事件
以下示例演示了如何使用jQuery hover()
方法绑定鼠标悬停和离开事件:
<!DOCTYPE html>
<html>
<head>
<title>jQuery hover() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">Hover over me</div>
<script>
$('#myDiv').hover(function() {
$(this).css('background-color', 'yellow');
}, function() {
$(this).css('background-color', 'white');
});
</script>
</body>
</html>
在上述示例中,我们创建了一个div
元素,并使用jQuery hover()
方法绑定了两个事件处理程序。第一个处理程序在鼠标悬停在元素上时将元素的背景颜色更改为黄色,第二个处理程序在鼠标离开元素时将元素的背景颜色改为白色。
注意事项
jQuery hover()
方法只在鼠标悬停在元素上时触发处理程序。- 可以使用两个参数来绑定鼠标悬停和离开事件处理程序。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery hover()方法 - Python技术站