为什么mouseenter事件监听器仅对第一个grid-item元素生效？

问题原因 #

你代码中使用document.querySelector('.add-to-cart')获取元素时，该方法只会返回整个DOM结构里第一个匹配到的.add-to-cart节点，所以你给所有商品绑定的hover事件，触发后实际修改的都是第一个商品的加入购物车栏显示状态，其余商品的购物车栏从未被操作，自然不会生效。

修复方案 #

每次hover事件触发时，从当前被hover的商品项内部查找它自己的加入购物车栏，再修改显示状态即可，修正后的JS代码如下：

// Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');

for (let cardItem of cardItems) {
    // 鼠标移入显示对应购物车栏
    cardItem.addEventListener('mouseenter' , () => {
        const currentAddCart = cardItem.querySelector('.add-to-cart')
        currentAddCart.style.display = "flex"
    })
    // 鼠标移出隐藏对应购物车栏（补充完整交互逻辑）
    cardItem.addEventListener('mouseleave' , () => {
        const currentAddCart = cardItem.querySelector('.add-to-cart')
        currentAddCart.style.display = "none"
    })
}

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