こんにちは。たいら(@tairaengineer2)です。
この記事ではJavaScriptのフレームワークjQueryのhoverメソッドの解説記事です。
スポンサーリンク
- hoverメソッドとは
- 作ったプログラムの概要
- フォルダ構成
- HTMLサンプルコード
- jQuery(JavaScript)サンプルコード
- 実行例
- 解説
- 背景色を設定、削除
- まとめ：jQueryのhoverを使てみよう！
hoverメソッドとは
マウスホバーの動きをシミュレートします。
マウスカーソルが要素の上に乗った時に、第一引数に渡した関数を実行します。マウスが要素から外れた時には第二引数が実行されます。要素内にある他の要素上にマウスカーソルが入った場合にも、マウスは”out”にならず、”over”のままです。例えばAというdiv内にBというimgがある場合、B上にカーソルが入ってもAのoutは発生しません。これはdivのmouseoutイベントを用いた場合とは違う動作になるので注意してください。
hover(over, out) - jQuery 日本語リファレンスから引用させて頂きました
さくっと言いますと、指定した要素にマウスが重なったとき、離れたときの動作を制御しています。
では、例をいってみましょう！
作ったプログラムの概要
今回作ったのはHTML、JavaScript（jQuery）を1つずつです。
タイトルやリストにマウスカーソルを重ねると、背景色が変わったり、アラートを出します。
フォルダ構成
フォルダ構成は下のようにしています。
HTMLサンプルコード
<!DOCTYPE html>
<html>
<head>
<title>hoverのサンプル</title>
<meta content="charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/HoverSample.js"></script>
</head>
<body>
<h1 id="title">タイトル</h1>
<ul id="animal_list">
<li id="cat">ネコ</li>
<li id="dog">イヌ</li>
</ul>
</body>
</html>jQuery(JavaScript)サンプルコード
/**
* タイトルにマウスカーソルが重なった時の背景色を変える関数
*/
$(function() {
$("#title").hover(
function() {
$('#title').css('background-color', '#00ffff');
},
function() {
$('#title').css('background-color', '');
}
);
});
/**
* 動物のリストにマウスカーソルが重なった時の背景色を変える関数
*/
$(function() {
$("#animal_list").hover(
function() {
$('#animal_list').css('background-color', '#0cb0e0');
},
function() {
$('#animal_list').css('background-color', '');
}
);
});
/**
* ネコにマウスカーソルが重なった時alertを出す関数
*/
$(function() {
$("#cat").hover(
function() {
alert("(=￣ω￣=)");
},
function() {
alert("(=；ェ；=)");
}
);
});
/**
* イヌにマウスカーソルが重なった時alertを出す関数
*/
$(function() {
$("#dog").hover(
function() {
alert("∪･ω･∪");
},
function() {
alert("ＵＴｪＴＵ ｸｩｰﾝ");
}
);
});実行例
最初の 画面はこんな感じです。
シンプルな表示です。
では、タイトルにマウスカーソルを重ねてみます。
タイトルの背景色が変わりました！
ではマウスカーソルを離してみましょう。
初期画面になりました！
では今度は、ネコにマウスカーソルを重ねてみます。
無事アラートが出ました！
アラートを閉じると
動物リストの背景色が変わりました！
ネコにマウスカーソルを重ねてるので、動物リストにも作用してます。
では、ネコからマウスカーソルを離してみると
無事アラートが出ました！
アラートを閉じると
動物リストの背景色がマウスカーソル前の画面に戻りました！
では、最後にイヌにマウスカーソルを重ねてみます。
無事アラートが出ました！
アラートを閉じると
動物リストの背景色が変わりました！
イヌにマウスカーソルを重ねてるので、動物リストにも作用してます。
では、イヌからマウスカーソルを離してみると
無事アラートが出ました！
アラートを閉じると
動物リストの背景色がマウスカーソル前の画面に戻りました！
解説
では以下の2点を解説します。
- Google Developersから読込んでjQueryを使う
- 背景色を設定、削除
Google Developersから読込んでjQueryを使う
jQueryを使いたいけど、jQueryをダウンロードして管理するのはめんどくさいです。
なので、Google Developersから読んでいます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Google DevelopersからjQueryを読み込む方法は下記記事をご参考ください。
背景色を設定、削除
背景色を変更するのにcssメソッドを使ってます。
css(name, value)
キーと値を引数に渡して、全ての要素のstyle属性を設定します。
valueに数値が入った場合、自動的に単位はピクセルとみなされます。
css(name, value) - jQuery 日本語リファレンスから引用させて頂きました
cssメソッドで背景色を変更していました。
valueの部分に何も設定しないと、背景色を設定しない変更ができます。
$('#title').css('background-color', '');ここですね。
スポンサーリンク
まとめ：jQueryのhoverを使てみよう！
以上がjQueryのhoverの解説記事です。
あなたの勉強の手助けになれば幸いです。
ではでは～(・ω・)ﾉｼ
ほかにも勉強記事を書いてます。
よければご参考ください。
【jQuery UI】カレンダーアイコンからカレンダーを表示させる【Datepicker】
【JavaScript】getElementByIdメソッドでul要素を取得し、createElementメソッドでli要素を追加
