mouseover 当一个定点设备（通常指鼠标）在一个元素本身或者其子元素上移动时，mouseover 事件在该元素上触发。
mouseenter 事件在定点设备（通常指鼠标）首次移动到元素的激活区域内时，在该元素上触发。
mouseenter尽管与 mouseover 类似，但是 mouseenter 的不同之处在于当鼠标指针从它后代的物理空间移动到它自己的物理空间时，它不会冒泡，也不会发送给它的任何后代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<script>
const test = document.getElementById("test");
// 当光标移到无序列表上时，此处理函数将仅执行一次
// test.addEventListener(
// "mouseenter",
// (event) => {
// // 突出显示鼠标悬停目标
// event.target.style.color = "purple";
// // 短暂延迟后重置颜色
// setTimeout(() => {
// event.target.style.color = "";
// }, 500);
// },
// false,
// );
// 每次将光标移动到不同的列表项上时，此处理函数都会执行
test.addEventListener(
"mouseover",
(event) => {
// 突出显示鼠标悬停目标
event.target.style.color = "orange";
// 短暂延迟后重置颜色
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
</script>
</body>
</html>
总结
mouseenter和mouseleave配合使用
mouseover和mouseout配合使用
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
