如何实现图片hover时显示图标效果？现有JS方案存在闪烁问题

你遇到的闪烁问题，本质是图标元素不在woocommerce-LoopProduct-link容器范围内，当鼠标移到图标上时，会触发produto元素的mouseleave事件——图标隐藏后，鼠标又回到produto区域，再次触发mouseenter，反复切换导致闪烁。

下面提供两种可行的解决方法：

方法一：纯CSS实现（推荐，更简洁高效） #

不需要JavaScript，直接用CSS伪类控制显示逻辑，前提是调整好元素结构：

情况1：图标是produto元素的子元素 #

/* 默认隐藏图标 */
.woocommerce-LoopProduct-link .shopengine-icon-add_to_favourite_1 {
    display: none;
}
/* 鼠标悬停produto时显示图标 */
.woocommerce-LoopProduct-link:hover .shopengine-icon-add_to_favourite_1 {
    display: block;
}

情况2：图标和produto同级（共享父容器） #

替换.product-parent为实际的共同父容器类名：

.shopengine-icon-add_to_favourite_1 {
    display: none;
}
.product-parent:hover .shopengine-icon-add_to_favourite_1 {
    display: block;
}

方法二：修复JavaScript代码 #

如果必须用JS实现，有两种思路：

方案1：让图标不接收鼠标事件 #

给图标添加pointer-events: none，让鼠标事件穿透到下方的produto元素，避免触发不必要的mouseleave：

var produto = document.getElementsByClassName('woocommerce-LoopProduct-link');
var icone = document.getElementsByClassName('shopengine-icon-add_to_favourite_1')

for (let i = 0; i < produto.length; i++) {
    icone[i].style.display = "none";
    // 让图标不拦截鼠标事件
    icone[i].style.pointerEvents = "none";
    
    produto[i].onmouseenter = function() {
        icone[i].style.display = "block";
    };

    produto[i].onmouseleave = function() {
       icone[i].style.display = "none";
    }; 
}

方案2：在mouseleave时判断目标元素 #

通过event.relatedTarget检查鼠标离开produto后是否进入了图标元素，若是则不隐藏图标：

var produto = document.getElementsByClassName('woocommerce-LoopProduct-link');
var icone = document.getElementsByClassName('shopengine-icon-add_to_favourite_1')

for (let i = 0; i < produto.length; i++) {
    icone[i].style.display = "none";
    
    produto[i].onmouseenter = function() {
        icone[i].style.display = "block";
    };

    produto[i].onmouseleave = function(e) {
        // 仅当鼠标未进入图标时才隐藏
        if (!icone[i].contains(e.relatedTarget)) {
            icone[i].style.display = "none";
        }
    }; 
}

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