发布于 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>
3、
在上述示例中，我们首先引入 jQuery 库，并定义了一个 CSS 类名为 .box 的元素，它将被用于演示鼠标经过事件。然后，在 JavaScript 代码中，使用 $() 函数绑定了两个事件处理函数：
4、
mouseenter 事件处理函数会在鼠标经过元素时触发，我们在这里将元素的背景色改为蓝色。
5、
mouseleave 事件处理函数会在鼠标离开元素时触发，我们将元素的背景色改回红色。
6、
当鼠标经过和离开 .box 元素时，对应的事件处理函数就会执行相应的逻辑。
这只是一个简单的示例，你可以根据实际需求来编写更复杂的鼠标经过事件处理逻辑。另外，确保在文档加载完成后再绑定事件处理函数，可以使用 $(document).ready() 或 $(function() { ... }) 来实现。
上一篇：js的数组转成json对象 下一篇：jq获取textarea对象值
JS基础 发布于 2024-01-03 23:38:25 浏览 110
JS基础 发布于 2024-01-03 23:37:26 浏览 107
JS基础 发布于 2023-12-14 23:15:15 浏览 148
JS基础 发布于 2023-11-28 00:36:59 浏览 128
JS基础 发布于 2023-11-28 00:31:36 浏览 123
JS基础 发布于 2023-11-27 00:50:52 浏览 120
JS基础 发布于 2023-06-19 15:43:22 浏览 168
CAD基础 发布于 2022-11-11 00:32:07 浏览 487
