js实现 hover
JavaScript 实现 hover 效果
使用 JavaScript 实现 hover 效果可以通过监听鼠标事件来模拟 CSS 的 :hover 伪类。以下是几种常见的方法：
监听 mouseenter 和 mouseleave 事件
通过添加事件监听器，在鼠标进入和离开元素时触发相应的效果。
const element = document.getElementById('hoverElement');
element.addEventListener('mouseenter', function() {
this.style.backgroundColor = 'lightblue';
});
element.addEventListener('mouseleave', function() {
this.style.backgroundColor = '';
});使用 classList 切换类名
通过添加或移除 CSS 类来实现 hover 效果，更易于维护。
const element = document.querySelector('.hover-target');
element.addEventListener('mouseenter', function() {
this.classList.add('hover-active');
});
element.addEventListener('mouseleave', function() {
this.classList.remove('hover-active');
});对应的 CSS 样式：
.hover-active {
background-color: lightblue;
transform: scale(1.05);
}使用事件委托优化性能
对于动态生成或大量元素的情况，可以使用事件委托减少事件监听器的数量。
document.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('hover-item')) {
event.target.style.border = '2px solid red';
}
});
document.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('hover-item')) {
event.target.style.border = '';
}
});结合 CSS 变量动态修改样式
通过 JavaScript 修改 CSS 变量，实现更灵活的 hover 效果。
const element = document.querySelector('.dynamic-hover');
element.addEventListener('mouseenter', function() {
document.documentElement.style.setProperty('--hover-color', 'green');
});
element.addEventListener('mouseleave', function() {
document.documentElement.style.setProperty('--hover-color', 'initial');
});对应的 CSS：
.dynamic-hover {
background-color: var(--hover-color);
}注意事项
- 性能优化：对于大量元素，优先考虑事件委托而非单独绑定事件。
- 兼容性：确保事件监听方式在老版本浏览器中可用，必要时使用 polyfill。
- 无障碍性：hover 效果不应影响键盘导航操作，可结合
focus事件增强可访问性。
