需添加JavaScript代码实现复选框控制对应Div显示隐藏并覆盖hover效果

针对你需要实现的25+组复选框与对应图片容器的控制逻辑，我整理了一套完整的实现方案，完全覆盖原有的hover交互：

核心思路 #

• 移除所有图片容器原有的hover触发的显示/隐藏逻辑（不管是CSS还是JS绑定的）
• 给每个复选框绑定change事件，根据勾选状态控制对应图片容器的显示/隐藏
• 页面加载完成后，根据复选框的初始状态同步图片容器的显示状态

完整代码实现 #

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有图片容器的数量，和你现有代码逻辑对齐
    const numberOfImages = document.getElementsByClassName("product-image").length;

    for (let i = 1; i <= numberOfImages; i++) {
        // 获取当前组的复选框和图片容器元素
        const checkbox = document.getElementById(`chk${i}`);
        const imageDiv = document.getElementById(`image${i}`);
        
        if (!checkbox || !imageDiv) continue; // 防止元素不存在报错

        // 1. 移除原有的hover逻辑
        // 情况1：禁止hover触发任何交互，覆盖CSS:hover的影响
        imageDiv.style.pointerEvents = 'none';
        // 情况2：清空JS绑定的hover相关事件
        imageDiv.onmouseover = null;
        imageDiv.onmouseout = null;

        // 2. 定义状态切换函数
        function toggleImageVisibility() {
            // 可根据你的实际布局修改display值，比如flex/inline-block等
            imageDiv.style.display = checkbox.checked ? 'block' : 'none';
        }

        // 3. 页面加载时初始化显示状态
        toggleImageVisibility();

        // 4. 给复选框绑定change事件
        checkbox.addEventListener('change', toggleImageVisibility);
    }
});

关键细节说明 #

• 彻底覆盖hover逻辑：通过pointerEvents: 'none'直接禁用图片容器的hover交互能力，同时清空JS绑定的hover事件，确保原有逻辑完全失效
• 健壮性处理：加入元素存在性判断，避免因ID不匹配或元素缺失导致代码报错
• 高扩展性：循环逻辑基于图片容器的数量，不管是25个还是更多，都能自动适配，无需手动逐个添加事件

如果你的图片容器原本的显示方式不是block（比如是flex、inline-block等），只需要修改toggleImageVisibility函数里的display值即可。

内容的提问来源于stack exchange，提问作者M. Cibene