Button悬浮动画Bug：悬浮图标时异常触发mouseout事件的解决问询

问题根源 #

你遇到的问题是因为在mouseover事件中完全替换了按钮的innerHTML，原来的SVG元素被移除并插入新元素。这个DOM结构的变化会导致浏览器误判鼠标已经离开按钮，触发mouseout事件——哪怕鼠标其实还在按钮范围内。另外，mouseover/mouseout是冒泡事件，子元素的状态变化也会触发父元素的这些事件。

方案一：改用mouseenter和mouseleave事件 #

这两个事件不会冒泡，且只针对元素本身的进入/离开状态，不受子元素DOM变化影响。修改JS代码如下：

const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")

// 切换为箭头图标
inviteButton.addEventListener("mouseenter", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
        </svg>`
  inviteSpanOut.style.display = "none";
});

// 切换回 Chevron 图标
inviteButton.addEventListener("mouseleave", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>`
  inviteSpanOut.style.display = "inline";
});

方案二：不替换DOM，用CSS切换图标显示 #

这种方法更高效，避免频繁修改DOM结构。修改HTML、CSS和JS：

修改后的HTML

<a id="invite-btn">
  <button>
    <!-- 两个图标都保留，通过类控制显示 -->
    <svg class="icon chevron-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
    </svg>
    <svg class="icon arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
    </svg>
  </button>
  <span id="span-out">INVITE NOW</span>
</a>

修改后的CSS

#invite-btn {
  text-decoration: none;
  font-size: 1rem;
}

#invite-btn button {
  border-radius: 3rem;
  width: 50px;
  height: 50px;
  border: 0;
  background-color: hsla(0, 0%, 10%, 1);
  transition: 0.3s ease-out;
  position: relative;
}

#invite-btn button:hover {
  width: 200px;
}

#invite-btn span {
  padding-left: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: 0.3s ease-out;
}

/* 默认只显示 Chevron 图标 */
.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.arrow-icon {
  display: none;
}
/* 鼠标悬停时切换图标 */
#invite-btn button:hover .chevron-icon {
  display: none;
}
#invite-btn button:hover .arrow-icon {
  display: block;
}

修改后的JS（简化很多）

const inviteSpanOut = document.getElementById("span-out");
const inviteButton = document.querySelector("#invite-btn button");

inviteButton.addEventListener("mouseenter", function() {
  inviteSpanOut.style.display = "none";
});

inviteButton.addEventListener("mouseleave", function() {
  inviteSpanOut.style.display = "inline";
});

为什么方案二更优？ #

• 避免频繁修改DOM，减少浏览器重排重绘，性能更好；
• 逻辑更清晰，把视觉表现交给CSS处理，JS只负责控制文本显示；
• 从根源上避免了DOM变化导致的事件误触发问题。

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