📅 最后修改于: 2023-12-03 15:32:12.335000 🧑 作者: Mango
mouseleave() 方法是 jQuery 中方便处理鼠标移出事件的函数，它绑定的事件会在鼠标移出绑定的元素或其子元素时被触发，可以用于实现一些动态效果。
$(selector).mouseleave(function)
selector：必需，用于选取要绑定事件的 HTML 元素。function：必需，规定要执行的函数。<!DOCTYPE html>
<html>
<head>
<title>jQuery mouseleave() 示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
margin: 20px auto;
text-align: center;
line-height: 200px;
color: #666;
font-size: 24px;
font-weight: bold;
}
.box:hover {
background-color: #999;
color: #fff;
}
</style>
</head>
<body>
<div class="box">鼠标移入试试看</div>
<script>
$(".box").mouseleave(function() {
$(this).css({
backgroundColor: "#f1f1f1",
color: "#666"
});
});
</script>
</body>
</html>
上面的示例中，当鼠标移出 .box 元素时，它的背景颜色和文字颜色会改为默认值。
mouseleave() 只会在鼠标离开目标元素时被触发。如果是想让事件在移入与移出时都被触发，可以使用 hover() 方法。mouseleave() 方法是 jQuery 中的函数，使用时需要引入 jQuery 库。