jQuery でホバーを使用する

今日の記事では、jQuery の .hover() イベントについて学習します。

jQuery で .hover() を使用する

JQuery の .hover() アプローチは、一方または両方のハンドラーを一致係数にバインドして、マウスカーソルが要素に出入りすると同時に完了します。バインダーハンドラーに応じて、.hover() アプローチで使用できるパラメーターには 3つの種類があります。

構文：

.hover( handlerInFn, handlerOutFn )
.hover( handlerInOutFn )

パラメーター：

1. handlerInFn：マウスポインタが要素に入ると、この関数を呼び出す/実行する必要があります。
2. handlerOutFn：マウスポインタが要素を離れるとき、この関数を呼び出す/実行する必要があります。
3. handlerInOutFn：マウスポインタが要素に出入りするとき、この関数を呼び出す/実行する必要があります。

.hover() アプローチは、マウスがアクティビティに出入りするためのコントローラーをバインドします。これを使用して、マウスが詳細内にある特定の時点での要素の動作を観察できます。

.hover() テクニックは、単一の関数を渡した場合でも、マウスの入力と出力の両方でそのハンドラーを実行します。これは、ハンドラー内で jQuery のさまざまなトグル手法を使用するか、event.type に応じてハンドラー内で異常に応答する必要があります。

詳細については、.hover() アプローチに関するドキュメントこちらをご覧ください。

次の例で .hover() を理解し​​ましょう。

HTML コード：

<ul>
  <li>Windows</li>
  <li>Mac</li>
  <li>Linux</li>
</ul>

JavaScript コード：

$( "li" ).hover(function() {
  console.log(this.textContent)
});

ul 要素を使用して、上記の例でオペレーティングシステムリストを説明しました。リストにカーソルを合わせると、要素へのカーソルの影響が追跡され、適切な関数が実行されます。

上記のインスタンス内で、Linux にカーソルを合わせると、要素のテキスト値が出力されます。

jQuery をサポートする任意のブラウザーで上記のコードスニペットを実行してみてください。以下の結果が表示されます。

出力：

"Linux"

動作中のここのコードのデモを参照してください。