JavaScriptを使用して、マウスが要素を入力したときに要素を表示する

ユーザーのマウスがその領域に入ったときに表示したい非表示の要素（アクションバー/メニューなど）があるとします。これを行うには、JavaScriptのmou​​seenterイベントを設定します。

方法：

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のmou​​seenterイベント

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

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

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

invisibleBox.addEventListener("mouseenter", addFullOpacity)

JavaScriptコードの仕組み

• 最初にquerySelector()を使用します .invisible-boxを見つけて取得するには 。次に、それを適切な名前の変数に割り当てます：invisibleBox 。
• 次に、関数宣言を設定します addFullOpacity()という名前を付けます 。その本体の内部{..} ステートメントを追加します 。
• このステートメントは、classListプロパティのadd()を添付します 見えないボックスにメソッドを追加し、opacity-1を追加します 見えないボックス要素へのクラス。
• 最後に、addEventListener()を設定しました そしてそれに2つの引数を与えます。最初の引数はmouseenterをリッスンします イベント。 2番目の引数は、addFullOpacity()を呼び出すことです。 上で作成した関数（mouseenterイベントを登録するとすぐに）

マウスオーバーとマウスオーバー？

マウスオーバーというイベントタイプもあることにお気づきかもしれません。 — マウスエンターとどう違うのですか？

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

• マウスオーバー イベントは、ユーザーのマウスが親要素またはその子要素のいずれかの上に移動するたびにトリガーされます。 前後の要素を移動し続けると、トリガーが発生し続けます。これは、パフォーマンスの面でコストがかかる可能性があります。
• mouseenterイベントはのみをトリガーします マウスがターゲットの親要素に入るとき—子は気にしません。 ：-（

マウスオーバーを使用することをお勧めします ユーザーが操作したときに異なる動作をしたいさまざまな機能を含むWebコンポーネントがある場合。それ以外の場合は、マウスエンターに固執します パフォーマンスに優れているためです。

リソース

• すべてのコードを含むCodePen。
• MDN Web Docs mouseenter