js实现 hover
实现 hover 效果的方法
在 JavaScript 中实现 hover 效果可以通过监听鼠标事件或结合 CSS 伪类来实现。以下是几种常见的方法：
使用 CSS 伪类
CSS 的 :hover 伪类是最简单的方式，无需 JavaScript：
.element:hover {
background-color: #f0f0f0;
color: #000;
}使用 JavaScript 事件监听
通过 JavaScript 监听 mouseenter 和 mouseleave 事件动态修改样式：
const element = document.querySelector('.element');
element.addEventListener('mouseenter', () => {
element.style.backgroundColor = '#f0f0f0';
element.style.color = '#000';
});
element.addEventListener('mouseleave', () => {
element.style.backgroundColor = '';
element.style.color = '';
});动态添加/移除 CSS 类
结合 CSS 和 JavaScript，通过添加或移除类名实现 hover 效果：
.element-hover {
background-color: #f0f0f0;
color: #000;
}const element = document.querySelector('.element');
element.addEventListener('mouseenter', () => {
element.classList.add('element-hover');
});
element.addEventListener('mouseleave', () => {
element.classList.remove('element-hover');
});使用 onmouseover 和 onmouseout 属性
直接在 HTML 元素上绑定事件：
<div
class="element"
onmouseover="this.style.backgroundColor='#f0f0f0'"
onmouseout="this.style.backgroundColor=''">
Hover me
</div>使用 CSS 变量和 JavaScript
通过 JavaScript 动态修改 CSS 变量实现 hover 效果：
.element {
--hover-bg: #f0f0f0;
--hover-color: #000;
}
.element:hover {
background-color: var(--hover-bg);
color: var(--hover-color);
}const element = document.querySelector('.element');
element.style.setProperty('--hover-bg', '#f0f0f0');
element.style.setProperty('--hover-color', '#000');注意事项
- CSS 伪类性能更好，优先推荐使用。
- JavaScript 方式适合需要动态控制或复杂交互的场景。
- 避免在频繁触发的回调中执行复杂逻辑，可能导致性能问题。
