エンジニアの将来って?

現在6年目の元COBOL現Javaエンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【jQuery】hoverを使って、背景色を変えたり、アラートを出す

こんにちは。たいら(@tairaengineer2)です。

この記事ではJavaScriptjQueryhoverのアウトプット記事です。

hoverメソッドとは

マウスホバーの動きをシミュレートします。

マウスカーソルが要素の上に乗った時に、第一引数に渡した関数を実行します。マウスが要素から外れた時には第二引数が実行されます。要素内にある他の要素上にマウスカーソルが入った場合にも、マウスは”out”にならず、”over”のままです。例えばAというdiv内にBというimgがある場合、B上にカーソルが入ってもAのoutは発生しません。これはdivのmouseoutイベントを用いた場合とは違う動作になるので注意してください。

hover(over, out) - jQuery 日本語リファレンスから引用させて頂きました

さくっと言いますと、指定した要素にマウスが重なったとき、離れたときの動作を制御しています。

では、例をいってみましょう!

作ったプログラムの概要

今回作ったのはHTMLJavaScript(jQuery)を1つずつです。
タイトルやリストにマウスカーソルを重ねると、背景色が変わったり、アラートを出します。

フォルダ構成

フォルダ構成は下のようにしています。

f:id:Tairax:20180825155946p:plain

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>

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("UTェTU クゥーン");
		}
	);
});

実行例

最初の 画面はこんな感じです。

f:id:Tairax:20180825160452p:plain

シンプルな表示です。

では、タイトルにマウスカーソルを重ねてみます。

f:id:Tairax:20180825162407p:plain

タイトルの背景色が変わりました!
ではマウスカーソルを離してみましょう。

f:id:Tairax:20180825160452p:plain

初期画面になりました!
では今度は、ネコにマウスカーソルを重ねてみます。

f:id:Tairax:20180825162837p:plain

無事アラートが出ました!
アラートを閉じると

f:id:Tairax:20180825172033p:plain

動物リストの背景色が変わりました!
ネコにマウスカーソルを重ねてるので、動物リストにも作用してます。

では、ネコからマウスカーソルを離してみると

f:id:Tairax:20180825172412p:plain

無事アラートが出ました!
アラートを閉じると

f:id:Tairax:20180825160452p:plain

動物リストの背景色がマウスカーソル前の画面に戻りました!

では、最後にイヌにマウスカーソルを重ねてみます。

f:id:Tairax:20180825172808p:plain

無事アラートが出ました!
アラートを閉じると

f:id:Tairax:20180825172033p:plain

動物リストの背景色が変わりました!
イヌにマウスカーソルを重ねてるので、動物リストにも作用してます。

では、イヌからマウスカーソルを離してみると

f:id:Tairax:20180825174024p:plain

無事アラートが出ました!
アラートを閉じると

f:id:Tairax:20180825160452p:plain

動物リストの背景色がマウスカーソル前の画面に戻りました!

解説

では以下の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の最新バージョンは↓から確認できます。

developers.google.com

 

背景色を設定、削除

背景色を変更するのにcssメソッドを使ってます。

css(name, value)

キーと値を引数に渡して、全ての要素のstyle属性を設定します。
valueに数値が入った場合、自動的に単位はピクセルとみなされます。

css(name, value) - jQuery 日本語リファレンスから引用させて頂きました

cssメソッドで背景色を変更していました。
valueの部分に何も設定しないと、背景色を設定しない変更ができます。

$('#title').css('background-color', '');

ここですね。

まとめ

以上がjQueryのhoverのアウトプット記事です。
あなたの勉強の手助けになれば幸いです。
ではでは~(・ω・)ノシ

参考にさせて頂いたサイト様

jQueryのhover()を活用したマウス操作まとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

カラーチャート/カラーネーム 147色 - TAG index

 

ほかにも勉強記事を書いてます。
よければご参考ください。

【jQuery UI】カレンダーアイコンからカレンダーを表示させる【Datepicker】

【JavaScript】getElementByIdメソッドでul要素を取得し、createElementメソッドでli要素を追加

【JavaScript】巻き上げ、ホイストをできるだけ分かりやすく解説します