当前位置：首页 > JavaScript

js实现hover

2026-02-02 04:49:35JavaScript

实现 hover 效果的 JavaScript 方法

使用 JavaScript 实现 hover 效果可以通过监听鼠标事件来动态修改元素的样式或行为。以下是几种常见的实现方式：

通过事件监听实现 hover

为元素添加 mouseenter 和 mouseleave 事件监听器，分别在鼠标进入和离开时触发样式变化：

const element = document.getElementById('hoverElement');

element.addEventListener('mouseenter', function() {
    this.style.backgroundColor = 'lightblue';
    this.style.color = 'white';
});

element.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '';
    this.style.color = '';
});

使用 classList 切换类名

定义一个 CSS 类用于 hover 样式，通过 JavaScript 动态添加和移除该类：

.hover-effect {
    background-color: lightblue;
    color: white;
    transition: all 0.3s ease;
}

const element = document.getElementById('hoverElement');

element.addEventListener('mouseenter', function() {
    this.classList.add('hover-effect');
});

element.addEventListener('mouseleave', function() {
    this.classList.remove('hover-effect');
});

动态创建 hover 效果

对于动态生成的元素，可以使用事件委托来监听 hover 事件：

document.addEventListener('mouseover', function(event) {
    if (event.target.matches('.hoverable')) {
        event.target.style.transform = 'scale(1.05)';
    }
});

document.addEventListener('mouseout', function(event) {
    if (event.target.matches('.hoverable')) {
        event.target.style.transform = '';
    }
});

使用 CSS 变量实现动态 hover

结合 CSS 变量和 JavaScript 实现更灵活的 hover 效果：

:root {
    --hover-bg-color: lightblue;
    --hover-text-color: white;
}

.hoverable {
    background-color: var(--bg-color, initial);
    color: var(--text-color, initial);
    transition: all 0.3s ease;
}

const elements = document.querySelectorAll('.hoverable');

elements.forEach(el => {
    el.addEventListener('mouseenter', function() {
        this.style.setProperty('--bg-color', 'var(--hover-bg-color)');
        this.style.setProperty('--text-color', 'var(--hover-text-color)');
    });

    el.addEventListener('mouseleave', function() {
        this.style.setProperty('--bg-color', '');
        this.style.setProperty('--text-color', '');
    });
});

实现延迟 hover 效果

添加定时器实现 hover 延迟显示或隐藏效果：

js实现hover

let hoverTimer;
const element = document.getElementById('hoverElement');

element.addEventListener('mouseenter', function() {
    clearTimeout(hoverTimer);
    hoverTimer = setTimeout(() => {
        this.classList.add('active-hover');
    }, 300); // 300ms 延迟
});

element.addEventListener('mouseleave', function() {
    clearTimeout(hoverTimer);
    this.classList.remove('active-hover');
});