js实现 hover
实现 hover 效果的 JavaScript 方法
使用 JavaScript 实现 hover 效果可以通过监听鼠标事件（mouseenter 和 mouseleave）来动态修改元素的样式或行为。以下是几种常见实现方式：
监听鼠标事件修改样式
通过 addEventListener 绑定 mouseenter 和 mouseleave 事件，直接修改元素的 style 属性：
const element = document.getElementById('target');
element.addEventListener('mouseenter', () => {
element.style.backgroundColor = 'lightblue';
element.style.transition = 'background-color 0.3s';
});
element.addEventListener('mouseleave', () => {
element.style.backgroundColor = '';
});动态添加/移除 CSS 类
通过切换 CSS 类实现样式变化，便于维护和复用：
/* CSS 部分 */
.hover-effect {
background-color: lightblue;
transition: background-color 0.3s;
}const element = document.querySelector('.hover-target');
element.addEventListener('mouseenter', () => {
element.classList.add('hover-effect');
});
element.addEventListener('mouseleave', () => {
element.classList.remove('hover-effect');
});使用事件委托优化性能
对于动态生成或大量元素的情况，可通过事件委托减少监听器数量：
document.addEventListener('mouseover', (event) => {
if (event.target.matches('.hover-item')) {
event.target.style.transform = 'scale(1.05)';
}
});
document.addEventListener('mouseout', (event) => {
if (event.target.matches('.hover-item')) {
event.target.style.transform = '';
}
});结合 CSS 变量实现动态效果
通过 JavaScript 修改 CSS 变量实现更灵活的效果：
:root {
--hover-color: lightblue;
}
.hover-var {
transition: background-color 0.3s;
background-color: var(--hover-color, transparent);
}const element = document.getElementById('dynamic-hover');
element.addEventListener('mouseenter', () => {
element.style.setProperty('--hover-color', 'pink');
});注意事项
- 性能优化：频繁触发 hover 事件时（如表格行），建议使用
requestAnimationFrame节流。 - 移动端兼容：部分移动设备可能不会触发
mouseleave，需额外处理touch事件。 - 无障碍访问：确保 hover 效果不影响键盘导航，可通过
:focus状态同步样式。
替代方案
对于简单交互，优先考虑纯 CSS 实现（性能更好）：
.button:hover {
background-color: lightblue;
transform: translateY(-2px);
}
