使用JS的onmouseenter和onmouseleave实现图标悬停切文本后无法复原如何解决

问题原因 #

你的代码中onMouseLeave事件没有实现恢复图标的逻辑，且触发onMouseEnter时直接覆盖了a标签的innerHTML，原始的SVG图标内容被直接清除，无法自动复原。

方案1：最小改动适配你的现有JS写法 #

只需要修改script部分的代码即可，提前存储原始图标内容，在鼠标离开时复原：

// 页面加载完成后先存储原始的SVG图标内容
const twitterLink = document.getElementById("link");
const originalIcon = twitterLink.innerHTML;

function onMouseEnter(x) {
    x.innerHTML = "twitter";
}
function onMouseLeave(x) {
    // 悬停结束恢复原始图标
    x.innerHTML = originalIcon;
}

你已经在事件触发时传入了this参数，因此可以直接用参数x操作当前元素，不需要重复调用getElementById。

方案2：更推荐的纯CSS实现（无JS性能更好） #

不需要写任何JS逻辑，只需要调整HTML结构加少量CSS即可，避免DOM操作带来的闪烁问题：

HTML调整 #

把图标和文本同时写入a标签，分别加类名标识：

<a id="link" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter link-icon" viewBox="0 0 16 16">
    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
  </svg>
  <span class="link-text">twitter</span>
</a>

添加CSS样式 #

通过hover伪类控制元素显隐：

/* 默认状态：显示图标，隐藏文本 */
#link .link-text {
  display: none;
}
/* 悬停状态：隐藏图标，显示文本 */
#link:hover .link-icon {
  display: none;
}
#link:hover .link-text {
  display: inline;
}

内容的提问来源于stack exchange，提问作者Emir Güner