マウスを乗せると説明を表示する

• トップ
• How To
• マウスを乗せると説明を表示する

説明

リンクにマウスを乗せた時にリンクの説明を表示します。

ソース

マウスを乗せた時に表示する説明文には my-hover-info のクラスを指定します。<a> タグの data-description 属性に説明文の ID を指定します。

.my-hover-info {
   display: none;
}

<ul>
<li><a data-description="desc-html" href="html/index.htm">HTML入門</a>
    <span class="my-hover-info" id="desc-html">- とほほのHTML入門にジャンプします。</span>
<li><a data-description="desc-css" href="css/index.htm">CSS入門</a>
    <span class="my-hover-info" id="desc-css">- とほほのCSS入門にジャンプします。</span>
<li><a data-description="desc-js" href="js/index.htm">JavaScript入門</a>
    <span class="my-hover-info" id="desc-js">- とほほのJavaScript入門にジャンプします。</span>
</ul>

window.addEventListener("load", () => {
  document.querySelectorAll("[data-description]").forEach((e) => {
    e.addEventListener("mouseover", (e) => {
      const id = e.target.getAttribute("data-description");
      document.getElementById(id).style.display = "inline";
    });
    e.addEventListener("mouseout", (e) => {
      const id = e.target.getAttribute("data-description");
      document.getElementById(id).style.display = "none";
    });
  });
});

実行例