JavaScriptのmouseenterイベントで、マウスが要素に乗ったときに要素を表示する方法

アクションバーやメニューなど、普段は見えない要素があり、ユーザーのマウスがその領域に入ったときだけ表示したい——そんなケースはよくあります。これを実現するには、JavaScriptのmouseenterイベントを使うのが簡単です。

実装手順

HTMLのマークアップ

お好みのエディタに以下のHTMLコードを追加してください(オンラインで試すならCodePenがおすすめです)。

<div class="invisible-box">Yay you can see me!</div>

CSSスタイリング

スタイルシートに以下のCSSを追加します。

.invisible-box {
  opacity: 0;
  transition: all 500ms;
  padding: 32px;
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: #cf4b32;
  color: #fff;
  text-align: center;
}

.opacity-1 {
  opacity: 1;
}

.invisible-boxクラスにはopacity: 0;が指定されているため、デフォルトでは要素が非表示になっています。その下にある.opacity-1はユーティリティクラスで、JavaScriptからこのクラスを付与することで要素を再び表示できるようにしています。

JavaScriptのmouseenterイベント

JSスクリプトに以下のコードを追加します。

let invisibleBox = document.querySelector(".invisible-box")

function addFullOpacity() {
  invisibleBox.classList.add("opacity-1")
}

invisibleBox.addEventListener("mouseenter", addFullOpacity)

コードの仕組み

• まずquerySelector()を使って.invisible-boxを取得し、わかりやすい名前の変数invisibleBoxに代入します。
• 次に関数宣言によってaddFullOpacity()という名前の関数を定義します。関数本体の{..}の中にはステートメント(文)を記述します。
• このステートメントでは、classListプロパティのadd()メソッドを使い、非表示のボックス要素にopacity-1クラスを追加します。
• 最後にaddEventListener()を呼び出し、2つの引数を渡します。第1引数はmouseenterイベントを監視するためのもので、第2引数はイベントが検知されたときに呼び出されるaddFullOpacity()関数です。

mouseenterとmouseoverの違いは?

似たイベントタイプとしてmouseoverが存在することに気づいた方もいるでしょう。では、mouseenterとはどこが違うのでしょうか?

主な違いは以下のとおりです。

• mouseoverイベントは、マウスが親要素やその子要素の上を移動するたびに発火します。要素間を行き来するたびに繰り返し発火するため、パフォーマンス面でコストが高くなる可能性があります。
• mouseenterイベントは、マウスが対象の親要素に入ったときにのみ発火します。子要素の出入りは考慮されません。

複数の機能を含むWebコンポーネントで、それぞれの子要素ごとに異なる挙動を持たせたい場合はmouseoverが適しています。それ以外のケースでは、パフォーマンスに優れたmouseenterを使うのがおすすめです。

参考リソース

• 全コードを掲載したCodePenサンプル
• MDN Web Docs: mouseenter