以下是一个简单的例子，演示如何使用 onmouseenter 和 onmouseleave 事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onmouseenter 和 onmouseleave 事件示例</title>
<style>
#myElement {
width: 200px;
height: 100px;
background-color: lightblue;
border: 1px solid darkblue;
}
</style>
</head>
<body>
<div id="myElement" onmouseenter="enterHandler()" onmouseleave="leaveHandler()">
移入/移出我
</div>
<script>
function enterHandler() {
document.getElementById("myElement").style.backgroundColor = "lightgreen";
console.log("鼠标进入元素！");
}
function leaveHandler() {
document.getElementById("myElement").style.backgroundColor = "lightblue";
console.log("鼠标离开元素！");
}
</script>
</body>
</html>
在这个例子中，当鼠标进入 myElement 元素时，会触发 enterHandler 函数，将元素的背景颜色更改为绿色。当鼠标离开元素时，会触发 leaveHandler 函数，将背景颜色恢复为蓝色。这两个事件的触发可以在控制台看到相应的日志输出。
注意：尽量避免使用内联事件处理程序（如 onmouseenter 和 onmouseleave 属性），而是推荐使用 JavaScript 中的 addEventListener 方法来添加事件监听器。这样做有助于将 HTML、CSS 和 JavaScript 代码分离，提高代码的可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/4438/HTML