发布于 2023-12-14 23:15:15 浏览 148 次
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
$(document).ready(function() {
$('.box').mouseenter(function() {
// 鼠标经过时的处理逻辑
$(this).css('background-color', 'blue');
});
$('.box').mouseleave(function() {
// 鼠标离开时的处理逻辑
$(this).css('background-color', 'red');
});
});
</script>
</body>
</html>
以下是一个示例代码,演示如何使用 jQuery 绑定鼠标经过事件:
3、
在上述示例中,我们首先引入 jQuery 库,并定义了一个 CSS 类名为 .box 的元素,它将被用于演示鼠标经过事件。然后,在 JavaScript 代码中,使用 $() 函数绑定了两个事件处理函数:
4、
mouseenter 事件处理函数会在鼠标经过元素时触发,我们在这里将元素的背景色改为蓝色。
5、
mouseleave 事件处理函数会在鼠标离开元素时触发,我们将元素的背景色改回红色。
6、
当鼠标经过和离开 .box 元素时,对应的事件处理函数就会执行相应的逻辑。
这只是一个简单的示例,你可以根据实际需求来编写更复杂的鼠标经过事件处理逻辑。另外,确保在文档加载完成后再绑定事件处理函数,可以使用 $(document).ready() 或 $(function() { ... }) 来实现。