纯JS实现hover元素加类、状态保持至hover另一同级元素的方法

AI 小北

2026-10-2

首先你的原始代码存在多个语法和逻辑错误，以下是问题说明和正确实现：

错误点说明

原生JavaScript不存在document.ready()方法，该方法是jQuery专属，原生要等待DOM加载完成需要监听DOMContentLoaded事件
方法名拼写错误：正确方法名为getElementsByClassName，你少写了末尾的s，且该方法返回的是类数组集合，无法直接调用事件监听、classList等方法，需要遍历集合内的每一个元素再操作
classList的add/remove方法没有返回值，不支持链式调用
事件绑定对象错误：你给默认隐藏的.hidden元素绑定鼠标事件，默认状态下该元素不可见，无法触发mouseenter事件，应该给可 hover 的父容器.container绑定事件

正确实现代码

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有容器元素
    const containers = document.querySelectorAll('.container');
    
    containers.forEach(container => {
        container.addEventListener('mouseenter', function() {
            // 先清除已激活的显示状态
            const activeEl = document.querySelector('.show');
            if (activeEl) {
                activeEl.classList.remove('show');
                activeEl.classList.add('hidden');
            }
            // 激活当前容器内的隐藏元素
            const currentTarget = this.querySelector('.hidden');
            if (currentTarget) {
                currentTarget.classList.remove('hidden');
                currentTarget.classList.add('show');
            }
        });
    });
});