mouseout 事件在鼠标指针离开某个元素或其子元素时触发。这个事件会在鼠标移出元素时被触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouseout Event Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
border: 2px solid blue;
text-align: center;
line-height: 200px;
font-size: 24px;
margin: 20px;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<div class="box">Hover me!</div>
<script>
const box = document.querySelector('.box');
box.addEventListener('mouseout', () => {
box.style.backgroundColor = 'lightblue'; // 恢复背景色
box.textContent = 'Hover me!'; // 恢复文本
});
</script>
</body>
</html>
解析
当鼠标指针离开 .box 元素时，mouseout 事件会被触发，背景颜色将恢复为 lightblue，并且文本内容会更新为“Hover me!”。