js mouseover

作者：绝朢╭ァ发布日期:2025-03-06 浏览:103

// HTML 部分
<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;">
    Mouse over me!
</div>

// JavaScript 部分
document.getElementById('myDiv').addEventListener('mouseover', function() {
    // 当鼠标悬停在元素上时，改变背景颜色
    this.style.backgroundColor = 'lightcoral';
});

document.getElementById('myDiv').addEventListener('mouseout', function() {
    // 当鼠标移出元素时，恢复原来的背景颜色
    this.style.backgroundColor = 'lightblue';
});

解释说明：

mouseover 事件：当鼠标指针移动到元素上方时触发。
mouseout 事件：当鼠标指针移出元素时触发。
在这个示例中，当鼠标悬停在 div 元素上时，背景颜色会从浅蓝色 (lightblue) 变为浅珊瑚色 (lightcoral)。当鼠标移出时，背景颜色会恢复为浅蓝色。

上一篇：js explode

下一篇：js settimeout setinterval