原生JavaScript：将点击事件转换为鼠标悬停事件的实现问题

现有一段原生JavaScript代码，点击事件功能运行正常，但尝试将触发方式改为鼠标悬停（把.onclick改为.onmouseover）后未生效，需要实现鼠标悬停在元素上时，显示对应内容并隐藏其他内容的功能。

原始代码 #

document.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById("div#logo1").onclick = function(){
        hideAllImages();
        document.getElementById("01").style.display="block";
        removeNavHighlight();
        document.getElementById("div#logo1").classList.add("my_active");
    };
    
    document.getElementById("div#logo2").onclick = function(){
        hideAllImages();
        document.getElementById("02").style.display="block";
        removeNavHighlight();
        document.getElementById("div#logo2").classList.add("my_active");
    };
        document.getElementById("div#logo3").onclick = function(){
        hideAllImages();
        document.getElementById("03").style.display="block";
        removeNavHighlight();
        document.getElementById("div#logo3").classList.add("my_active");
    };

function hideAllImages() {
    var items = document.getElementsByClassName('changing_text');
    var itemsLen = items.length;
    for(var i = 0; i < itemsLen; i++) {
        items[i].style.display="none";
    }
}});

核心问题与修复步骤 #

1. 修正ID选择错误 #

document.getElementById()的参数是元素的纯ID值，不能带CSS选择器前缀（比如div#）。如果你的元素ID是logo1、logo2、logo3，必须去掉div#前缀，否则无法找到目标元素，事件自然无法触发。

2. 选择合适的悬停事件 #

推荐使用mouseenter事件替代mouseover：

• mouseover会在鼠标进入元素或其子元素时反复触发，易导致不必要的重复执行
• mouseenter仅在鼠标首次进入元素时触发，更符合悬停触发的需求

3. 重构代码减少冗余 #

避免重复编写三次几乎相同的事件逻辑，通过循环批量处理元素，提升代码可维护性。

修改后的完整代码 #

document.addEventListener("DOMContentLoaded", function(event) {
    // 批量处理所有logo元素
    for (let i = 1; i <= 3; i++) {
        const logoId = `logo${i}`;
        const contentId = `0${i}`;
        const logoElement = document.getElementById(logoId);
        
        if (logoElement) {
            // 绑定mouseenter悬停事件
            logoElement.addEventListener('mouseenter', function() {
                hideAllImages();
                // 显示对应内容
                document.getElementById(contentId).style.display = "block";
                removeNavHighlight();
                // 添加激活样式
                this.classList.add("my_active");
            });
        }
    }

    function hideAllImages() {
        const items = document.getElementsByClassName('changing_text');
        for (let i = 0; i < items.length; i++) {
            items[i].style.display = "none";
        }
    }

    // 补充removeNavHighlight函数实现（原代码未提供，需确保该逻辑存在）
    function removeNavHighlight() {
        const activeElements = document.querySelectorAll('.my_active');
        activeElements.forEach(el => el.classList.remove('my_active'));
    }
});

额外注意事项 #

• 确保removeNavHighlight函数已正确实现，原代码未提供该函数逻辑，需补充以移除之前元素的激活样式
• 不建议在元素ID中包含#符号，不符合HTML规范，若实际ID确实带有该符号，可保留原写法但需尽快修正

内容的提问来源于stack exchange，提问作者Gelebrin7