mouseleave

マウスリーブ（イベント）

意味マウスが要素の上から離れたときに発生する。

mouseleaveとは？

マウスカーソルが要素から出るときに発生するイベント（バブリングを伴わない）。

mouseleaveの具体的な使い方

mouseleaveイベントを使用してスタイルを変更する

<style>
  #hoverBox {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
</style>

<div id="hoverBox">ここにマウスを乗せてください</div>

<script>
  const box = document.getElementById('hoverBox');

  box.addEventListener('mouseenter', () => {
    box.style.backgroundColor = 'lightgreen';
    box.textContent = 'マウスが乗っています';
  });

  box.addEventListener('mouseleave', () => {
    box.style.backgroundColor = 'lightblue';
    box.textContent = 'マウスが離れました';
  });
</script>

この例では、mouseleaveイベントを使用して要素のスタイルと内容を動的に変更しています。マウスが要素に乗ったときと離れたときで背景色とテキストが変化します。

mouseleaveに関するよくある質問

Q. mouseleaveとmouseoutの違いは？

A. mouseleaveはバブリングしませんが、mouseoutは子要素に対してもイベントが発生します。mouseleaveは要素全体から出た時のみ発生します。

Q. mouseleaveイベントの使用例は？

A. ドロップダウンメニューを閉じる、ツールチップを非表示にする、ホバー効果を解除するなどの操作に使用されます。

Q. touchデバイスでも使えますか？

A. mouseleaveはマウス専用のイベントです。タッチデバイスでは動作しないため、代替としてtouchendイベントの使用を検討してください。

mouseleaveが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのmouseleaveやoffline、change、dblclick、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。