-
JavaScript
- hover
- jQuey
jQueryでhoverを使用する方法を詳しく解説【マウスカーソルで変化】
昨今のWebサイトはイメージに沿った様々な動きを実装した動的なサイトが多く存在しています。
CSSのみで実装できれば良いですが、CSSのアニメーションでは時には限界があります。
CSSでマウスのカーソルを当てるとアニメーションが始まる「hover」がありますが、この「hover」はjQueryのメソッドの１つとしても存在しています。
例えば、マウスカーソルが要素の上にきた瞬間にクラスを追加したり、「hover」メソッドへCSSを記述したりなど…マウスカーソルを使用した動的なWebサイトを制作することができます。
本記事では、jQueryの「hover」メソッドの書き方や、使用例などについて詳しく解説していきます。
hoverとは？
CSSの擬似クラスのhoverとは
まずはjQueryのメソッドの「hover」ではなく、CSSの擬似クラスの「hover」について簡単に触れていきたいと思います。
CSSで使用される「hover」は擬似クラスと呼ばれるもので、指定した要素にマウスカーソルを持っていくと機能します。マウスカーソルを外した際に別の機能を持たすことも可能です。
実務でよく見かける使用シーンとしては、ボタンです。マウスカーソルが重なった瞬間に、ボタンの色が変更するという動きはよく見かけますよね。
このように、マウスカーソルが重なっているときに機能させ、外した際には元に戻す（最初に戻る）ような処理がよく使われています。
jQueryの「hover」メソッドとは
jQueryのメソッドの１つの「hover」は、マウスのカーソルが要素の上にあるかどうかを判断します。
「hover」に似たメソッドは「mouseover」「mouseout」「mouseenter」「mouseleave」などいくつかあります。どれもマウスのカーソルによって発火するかどうかを判断するメソッドです。
全てざっくり説明すると、
- mouseover → マウスのポインタが、指定した要素やその中の要素に乗るたび発火
- mouseout → マウスのポインタが、指定した要素やその中の要素から外れたときに発火
- mouseenter → マウスのポインタが、指定した要素に乗るたび発火
- mouseleave → マウスのポインタが、指定した要素から外れると発火
というようなイメージです。
「mouseover」や「mouseout」はそれぞれカーソルが要素の上にきたとき・そうではないときのどちらかの判断しかできないため、マウスのカーソルで何か発火させたい場合は「hover」の方が便利です。
hoverの書き方や使用方法
基本的な構文
jQueryで「hover」を使う方法は以下の構文の通りです。
$('セレクタ').hover(
function () {
//マウスカーソルが要素の上に来たときの処理
},
function () {
//マウスカーソルが要素から外れたときの処理
}
);使用方法
「h1」にマウスカーソルを乗せたときに、文字色が赤色に変わり、外すと元に戻る動きをサンプルとして実装しています。これはCSSの「hover」と同じ動きです。
下記がコードです。
$('h1').hover(
function () {
$(this).css('color', 'red');
},
function () {
$(this).css('color', '');
}
);１行ずつ解説します。
$('h1').hover();「h1」に「hover」したときにjsが発火します。
$(function () {
$(this).css('color', 'red');
});２〜３行目のコードは、マウスのカーソルがh1の上に来たときの処理を書いています。
$(this)→ h1 のことを指しています。css("color","red");→h1{ color : red; }
マウスカーソルがh1の上にきたとき、h1の文字色を赤色へ変更します。
$(function() {
$(this).css("color","");
})４〜６行目のコードは、マウスのカーソルがh1から離れたときの処理です。
$(this)→ h1 のことを指しています。css("color","");→h1{ color : なし; }
("color","")は色の指定がないため最初の色へ戻ります。
hover()がうまく動かないとき
マウスカーソルを外しても元に戻らない
カーソルをのせたときは変わるのに、外しても変化しないというトラブルが起きたときは、２つ目の「function()」のコードを記述していないことが多いです。
下記は先ほどの「使用方法」で紹介したコードです。２つ目の「function()」を追加し、コードを追加してみてください。
$('h1').hover(
function () {
$(this).css('color', 'red');
},
function () {
// ここに記述を追加してください
}
);逆に、カーソルを要素上にのせたときだけの動作すれば良い場合は、２つめの「function()」のコードを記述する必要ありません。
hoverが効いていない
「hover」が効いていない場合は、jQueryがそもそも動いていない可能性も考えられます。
jQueryが動いていないときは、下記の記事を参考に確認してみてください。
hoverを使用した具体的な使用例
サンプルコードを下に示します。下のサンプルコードは見出しの「リスト」にマウスカーソルを持っていくとサンプル１～4というリストが表示されます。そして、サンプルの上にカーソルを持っていくと文字色が変わるという処理を実装しています。
下のコードをテキストエディタにコピー&ペーストし、ブラウザで表示させて動きを確認してみてください。
<!DOCTYPE html>
<html lang="ja">
<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"></script>
<script>
$('.container').hover(
function () {
$('.list').show();
$('li').hover(
function () {
$(this).css('color', 'red');
},
function () {
$(this).css('color', '');
}
);
},
function () {
$('.list').hide();
}
);
</script>
</body>
</html>クリックイベントと併せて実装する
「click」イベントと合わせて使うことで、機能の幅も広がります。
クリックについては下の記事にまとめていますので参考にしてみてください。
まとめ
「hover」はマウスのカーソルの動きを利用してアニメーションなどをつけることができます。
カーソルがが要素上にくるだけでメニューが開いたり、CSSを操作することができるため、便利なメソッドです。
しかし、乱雑に「hover」を使いすぎるとユーザーにとってわずらわしさを与える → UIとしてよくない可能性もあります。
使いどころをしっかりと考えて使用しましょう。
