JS 原生代码实现 div 悬停状态修改及开发注意要点

在 JavaScript 中，要修改 `div` 的 `hover` 状态，可以通过监听 `mouseenter` 和 `mouseleave` 事件来模拟 `hover` 效果，并且动态修改元素的样式。以下是示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modify Div Hover State</title> <style> /* 初始样式 */ #myDiv { width: 200px; height: 200px; background-color: lightblue; } </style> </head> <body>  <div id="myDiv">Hover me!</div> <script> // 获取 div 元素 const div = document.getElementById('myDiv'); // 监听鼠标进入事件 div.addEventListener('mouseenter', function () { // 鼠标进入时修改样式 this.style.backgroundColor = 'lightcoral'; this.style.color = 'white'; }); // 监听鼠标离开事件 div.addEventListener('mouseleave', function () { // 鼠标离开时恢复样式 this.style.backgroundColor = 'lightblue'; this.style.color = 'black'; }); </script> </body> </html> ``` 代码解释： 1. 在 HTML 中定义了一个 `id` 为 `myDiv` 的 `div` 元素。 2. 在 CSS 中设置了 `div` 的初始样式。 3. 在 JavaScript 中，通过 `document.getElementById` 方法获取 `div` 元素。 4. 使用 `addEventListener` 方法监听 `mouseenter` 事件，当鼠标进入 `div` 时，修改其颜色和文字颜色。 5. 使用 `addEventListener` 方法监听 `mouseleave` 事件，当鼠标离开 `div` 时，恢复其初始样式。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 要确保事件绑定的元素正确，避免绑定到错误的元素上。 2. 动态修改样式时，需要注意样式的优先级，避免被其他 CSS 规则覆盖。 3. 当有多个元素需要实现相同的 `hover` 效果时，要考虑使用循环或事件委托来简化代码。 ######[AI写代码神器 | 564点数解答 | 2025-08-21 20:30:01]

服务商

更多选项

快捷项

自定义