在鼠标悬停时添加内部文本并在鼠标移开时删除 JS

Question

我正在制作一个导航按钮，当它悬停时，它的右侧不仅仅是一个图标，还会有一些文本。一旦光标离开按钮，它将返回仅显示图标。

HTML

<button title="Style Guide" id="style-guide" hover-text="Style Guide">
  <i class="fa-solid fa-border-top-left"></i>
</button>

JAVASCRIPT

document.querySelectorAll("[hover-text]").forEach((element) => {
  element.addEventListener("mouseover", () => {
    element.innerText += element.getAttribute("hover-text");
  })
  element.addEventListener("mouseout", () => {
    element.innerText = element.innerText.replace(element.getAttribute("hover-text"), "")
  })
})

Answer 1

const fun = () => {
    element.innerText += element.getAttribute("hover-text");
  };

document.querySelectorAll("[hover-text]").forEach((element) => {
  element.addEventListener("mouseover", fun)});

document.querySelectorAll("[hover-text]").forEach((element){ element.removeEventListener("mouseout",fun)});