如何用JavaScript实现卡片悬停添加元素并避免mouseout触发问题

问题核心是mouseout事件的触发逻辑：当鼠标从父元素移到其子元素上时，父元素的mouseout会被触发，导致你清空了.cardsDesc的内容，按钮还没被点击就消失了。

最简单的解决方案：替换为mouseenter和mouseleave事件 #

mouseenter和mouseleave是专门为这种场景设计的：

• mouseenter：仅在鼠标首次进入元素本身时触发，不会因鼠标在子元素间移动而重复触发
• mouseleave：仅在鼠标**完全离开元素（包括所有子元素）**时触发

修改你的JavaScript代码如下：

document.addEventListener('DOMContentLoaded', function () {
    let cards = document.querySelectorAll('.cards');
    for (let i = 0; i < cards.length; i++) {
        cards[i].addEventListener('mouseenter', function () {
            let desc = this.querySelector('.cardsDesc');
            desc.innerHTML = `<div class="readMore" onmouseover="moveArrow('arrow1')" onmouseout="moveArrowBack('arrow1')">
            <a href="About.html" class="readMoreLink">Click here to read more <span id="arrow1">&#10132;</span></a>
            </div>`;
        })
        cards[i].addEventListener('mouseleave', function () {
            let desc = this.querySelector('.cardsDesc');
            desc.innerHTML = ``;
        })
    }
})

额外优化点 #

• 把cards[i]替换为this：在事件处理函数中，this指向当前触发事件的.cards元素，代码更简洁，避免循环索引的依赖
• 确保moveArrow和moveArrowBack函数已正确定义，否则箭头的hover效果会失效

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