JavaScript

【マウスポイントで変化】でjQueryでhoverを使う方法を解説

HTML/CSSで作られた静的なページに機能をつけるのがjQueryです。昨今のWebページはシンプルな見た目のページに機能がたくさんついています。特に、メニューの大枠だけ表示させておいて、クリックやオンマウスによって詳しいページリンクを表示させるという機能は多く見られると思います。

オンマウスでの表示非表示の切り替えはhoverというjQueryのメソッドで実現することができます。表示非表示に限らず、マウスが乗ることでCSSやテキストを変更することも可能です。

本記事では、jQueryでhoverを使う方法を解説します。

hoverとは

hoverでは指定した要素にマウスカーソルを持っていくと機能します。また、同時にマウスカーソルを外した際に別の機能を持たすことも可能です。オンマウスの時に機能させ、外した際に元に戻すような処理がよく使われます。

jQueryでマウスカーソルを要素に持ってきて機能させるメソッドとして、mouseoverとmouseoutがあります。hoverはmouseoverとmouseoutをまとめたメソッドです。使う機会も多いと思います。次に、使い方を解説するので、覚えておくことをおすすめします。

jQueryでhoverの使う方法

jQueryでhoverを使う方法は以下の構文の通りです。

$(“セレクタ”).hover(function(){
	//マウスカーソルが要素に乗ったときの処理
},function(){
	//マウスカーソルが要素から外れたときの処理
});

コード例を用いて解説します。下のコードはh1にマウスカーソルを乗せたときに文字色が赤色に変わり、外すと元に戻る処理です。

$("h1").hover(function(){
      $(this).css("color","red");
    },function(){
      $(this).css("color","");
    });


一行目にはhoverメソッドを使っています。一つ目のfunction()がマウスカーソルが乗ったときの処理です。一つ目のfunction()の後は文字色を赤色に変える処理のため、マウスカーソルが乗ったら、文字色が赤色に変わります。

二つ目のfunction()はマウスカーソルが外れたときの処理です。ここでは、colorを空白にしているので、文字色は元の黒色に戻ります。もし、CSSで別の色にしていた場合は、colorの色を合わせる必要があります。

hover()で起こるトラブル

マウスを外しても元に戻らない

マウスを乗せて変わったものが、外しても変化しないというトラブルがあります。外した際に、機能が働かない原因としては、function()の2つ目のコードを記述していないことが多いです。

hoverは2つ目のfunction()で外したときの動きを設定します。function()を1つしか記述していない場合、マウスカーソルが乗った動きで泊まるので、気をつけましょう。

hoverが効いていない

hoverが聞かない場合があります。このときはコードの順番を確認することをおすすめします。jQueryで追加した要素に対してhoverをする際に起こりやすいです。

例えば、jQueryでボタンを出現させるとします。この際、hoverのコードはボタンを出現させるコードの後に書かなければいけません。ボタンのコードをhoverの後ろに書いてしまうと、ボタンを出現させてもhoverが動かないので気を付ける必要があります。

サンプルコード

サンプルコードを下に示します。下のサンプルコードは見出しの「リスト」にマウスカーソルを持っていくとサンプル1~4というリストが表示されます。そして、サンプルの上にカーソルを持っていくと文字色が変わるという処理を実装しています。

下のコードをテキストエディタにコピー&ペーストし、ブラウザで表示させて動きを確認してみてください。

<!-- wp:code -->
<pre class="wp-block-code"><code><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .list{
      display:none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>リスト</h2>
    <div class="list">
      <ul>
        <li>サンプル1</li>
        <li>サンプル2</li>
        <li>サンプル3</li>
        <li>サンプル4</li>
      </ul>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script>
    $(".container").hover(function(){
      $(".list").show();
      $("li").hover(function(){
        $(this).css("color","red");
      },function(){
        $(this).css("color","")
      });
    },function(){
      $(".list").hide();
    });
  </script>
</body>
</html></code></pre>
<!-- /wp:code -->

まとめ

hoverはマウスの動きで機能をつけることができます。マウスが要素に乗るだけでメニューを開いたり、CSSを操作したりできるため、とても便利な機能です。しかし、あまり乱雑にhoverを使いすぎるとユーザーにとってわずらわしさを与える可能性もあります。

使いどころを押さえて最小で使うようにすることをおすすめします。また、hoverだけでなくclickイベントと合わせて使うことで、機能の幅も広がります。クリックについては下の記事にまとめていますので参考にしてみてください。

jQueryでクリックイベントを作るおすすめの方法【on,click】