ywork2020.com

Title

要素にホバーイベントを登録する

目次 (INDEX)

hoverとは

ここで説明する hover とは次の語句からなるjQueryのメソッドです。
hover
読み: ホバー
意味: 空中を舞う、空中に停止する

目次に戻る

hoverメソッドの概要

このメソッドは、セレクタに該当する既存要素にマウスエンターイベントとマウスリーブイベントを同時にバインドします。

つまり、hover() は、 mouseenter()mouseleave() メソッドを使ってイベントをバインドすることを簡略するためのメソッドです。 したがって、ホバーというイベントがあるわけではなく、バインドしたハンドラーをプログラム上で意図的に呼び出すためには mouseenter()mouseleave() を使用する必要があります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

このメソッドは引数を2つ、または1つ取ります。引数を2つ与えた場合には1つ目の引数で mouseenter() のハンドラーを与え、 2つ目の引数で mouseleave() のハンドラーを与えたことになります。 また、引数を1つ与えた場合には マウスエンターイベント と マウスリーブイベントに同じハンドラーがバインドされます。

Selector.hover(handlerIn, handlerOut);
Selector.hover(handlerInAndOut);

目次に戻る

サンプルコードと実行結果

ここでは、.hover(handlerIn, handlerOut) の構文を使って マウスエンター と マウスリーブ のイベントにハンドラーをバインドします。

サンプルコード: CSS
<style>
	div{
		position: relative;
		left: 0;
		top: 0;
		background-color: ##lightblue;
		border: thin solid currentColor;
		padding: 10px;
		height: 160px;
		width: 160px
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>Element DIV</div>
	<script>...</script>
</body>
  • 06: div (div要素です。この要素にホバーイベントをバインドします。)
サンプルコード: script
<script>
	$("div").hover(
		function(){
			$(this).animate({"left":"-10px", "top":"-10px", "height":"180px", "width":"180px"}, 200);
		},
		function(){
			$(this).animate({"left":"0px", "top":"0px", "height":"160px", "width":"160px"}, 200);
		}
	);
</script>
  • 02-09: $("div").hover(handlerIn, handlerOut) (div要素にホバーイベントをバインドします。引数にはホバーインのハンドラーとホバーアウトのハンドラーを与えます。)
  • 03-05: function(){execution process} (構文で表すと、handlerIn の部分です。ホバーインした時の処理を関数で記述しています。)
  • 04: animate() (要素のアニメーションを実行するメソッドです。)
  • 06-08: function(){execution process} (構文で表すと、handlerOut の部分です。ホバーアウトした時の処理を関数で記述しています。)
  • 07: animate() (要素のアニメーションを実行するメソッドです。)
実行結果:
Element DIV

目次に戻る