jQuery ホバー したら 表示

jQueryで要素をホバーしたら表示する実装方法を解説！

jQueryで要素をホバーしたら表示する実装方法を解説！

この記事では、jQueryを使って要素をホバーした時に別の要素を表示する方法について、初心者の方にもわかりやすく解説していきます。サンプルコードもご用意しましたので、すぐにあなたのWebサイトに実装できます。

jQueryでホバー表示を実装する方法

ホバー表示とは？

ホバー表示とは、マウスカーソルを特定の要素に重ねると、別の要素が表示される仕組みのことです。Webサイトに動きを与える効果的な方法の一つで、ユーザーエクスペリエンスの向上に役立ちます。

jQueryを使うメリット

jQueryを使うことで、複雑なJavaScriptのコードを書かずに、シンプルで直感的なコードでホバー表示を実装できます。これは、jQueryが提供する豊富なメソッドとイベント処理機能のおかげです。

実装手順

jQueryを使ったホバー表示の実装は、以下の3ステップで行います。

1. HTMLの記述

まずは、ホバー表示の対象となる要素と、ホバー時に表示する要素をHTMLで記述します。ここでは、例としてボタンと、ホバー時に表示されるツールチップを記述します。


<button id="hoverTarget">ホバーしてください</button>
<div id="tooltip">ツールチップの内容です</div>

2. CSSの記述

次に、CSSを使って要素のスタイルを設定します。ここでは、初期状態ではツールチップを非表示にし、ホバー時に表示されるようにスタイルを設定します。


<style>
#tooltip {
  display: none; /* 初期状態では非表示 */
  position: absolute;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

#hoverTarget:hover + #tooltip {
  display: block; /* ホバー時は表示 */
}
</style>

3. jQueryの記述

最後に、jQueryを使ってホバー時の表示・非表示の処理を実装します。ここでは、.hover()メソッドを使って、マウスカーソルが要素上に入った時（mouseenterイベント）と要素上から出た時（mouseleaveイベント）の処理を記述します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#hoverTarget").hover(
    function() {
      $("#tooltip").show(); // ホバー時に表示
    },
    function() {
      $("#tooltip").hide(); // ホバーから外れたら非表示
    }
  );
});
</script>

様々なホバー表示の実装例

上記の例では、単純な表示・非表示の切り替えを実装しましたが、jQueryを使うことで、より多彩なホバー表示を実現できます。ここでは、いくつかの実装例を紹介します。

スライド表示

.slideDown()メソッドと.slideUp()メソッドを使うことで、要素をスライドしながら表示・非表示にすることができます。


<script>
$(document).ready(function() {
  $("#hoverTarget").hover(
    function() {
      $("#tooltip").stop().slideDown(); // スライドダウンで表示
    },
    function() {
      $("#tooltip").stop().slideUp(); // スライドアップで非表示
    }
  );
});
</script>

フェード表示

.fadeIn()メソッドと.fadeOut()メソッドを使うことで、要素をフェードイン・フェードアウトしながら表示・非表示にすることができます。


<script>
$(document).ready(function() {
  $("#hoverTarget").hover(
    function() {
      $("#tooltip").stop().fadeIn(); // フェードインで表示
    },
    function() {
      $("#tooltip").stop().fadeOut(); // フェードアウトで非表示
    }
  );
});
</script>

遅延表示

.delay()メソッドを使うことで、ホバーしてから一定時間後に要素を表示することができます。


<script>
$(document).ready(function() {
  $("#hoverTarget").hover(
    function() {
      $("#tooltip").stop().delay(500).fadeIn(); // 0.5秒後にフェードインで表示
    },
    function() {
      $("#tooltip").stop().fadeOut(); // フェードアウトで非表示
    }
  );
});
</script>

注意点と応用例

イベントのバブリング

要素がネストしている場合、ホバーイベントが親要素にも伝播する「バブリング」が発生することがあります。これを防ぐには、.stopPropagation()メソッドを使います。

タッチデバイスへの対応

スマートフォンなどのタッチデバイスでは、ホバーイベントは発生しません。タッチデバイスに対応するには、touchstartイベントなどを組み合わせる必要があります。

実用的な応用例

ホバー表示は、以下のような場面で活用できます。

  • ドロップダウンメニュー
  • ツールチップ
  • 画像の拡大表示
  • ボタンのホバーエフェクト

まとめ

この記事では、jQueryを使って要素をホバーした時に別の要素を表示する方法について解説しました。jQueryを使うことで、シンプルで直感的なコードでホバー表示を実装できます。この記事で紹介した実装例を参考に、あなたのWebサイトをより魅力的にしてみてください。

関連情報

Q&A

質問 回答
ホバー表示が動作しません。何が原因でしょうか？ 考えられる原因としては、jQueryが正しく読み込まれていない、セレクタの記述ミス、JavaScriptのエラーなどがあります。ブラウザの開発者ツールを使ってエラーを確認してみてください。
ホバーしたときに要素が一瞬で表示・非表示されてしまいます。 これは、イベントのバブリングが原因かもしれません。.stopPropagation()メソッドを使って、イベントの伝播を止めてみてください。
タッチデバイスでもホバー表示を有効にしたいです。 タッチデバイスでは、touchstartイベントやtouchendイベントなどを組み合わせて実装する必要があります。

その他の参考記事:jquery dropdownplain