デモページはこちら

jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装します。hoverメソッドは要素にマウスカーソルが重なったmouseenterイベント時と、要素からマウスカーソルが離れたmouseleaveイベント時の処理を一度に記述できます。

以下のhtmlの構造でテストします。

<p class="title">hoverメソッド</p>
<div class="photo01"><a href="#"><img src="images/photo01.jpg" alt=""></a></div>
<p class="title">hoverメソッドの引数を関数1つだけにする<br>
※マウスカーソルが重なった時と離れた時に処理を実行</p>
<div class="photo02"><a href="#"><img src="images/photo02.jpg" alt=""></a></div>
<p class="title">hoverメソッドの引数で2つ目の関数で処理をしない<br>
※マウスカーソルが重なった時のみ処理を実行</p>
<div class="photo03"><a href="#"><img src="images/photo03.jpg" alt=""></a></div>
<p class="title">onメソッドの引数に{}を使い複数のイベント処理（mouseenter・mouseleave）</p>
<div class="photo04"><a href="#"><img src="images/photo04.jpg" alt=""></a></div>

hoverメソッドは1つ目の関数にマウスカーソルが重なった時の処理を記述し、2つ目の関数に離れた時の処理を記述します。ただし1つ目の関数しか記述しなかった場合、重なった時も離れた時も1つ目の同じ関数が実行されます。そのため重なった時のみ処理を実行したい場合は2つ目の関数を空で記述します。onメソッドの引数に{}を使い複数のイベント（mouseenter・mouseleave）に処理を記述してもhoverメソッドと同じ動作が実装できます。

$(function() {
	$('.photo01 a').hover(
		function(){
			$(this).children('img').addClass('js-opacity');
		},
		function(){
			$(this).children('img').removeClass('js-opacity');
		}
	);
	$('.photo02 a').hover(
		function(){
			//マウスカーソルが重なった時と離れた時の処理
			$(this).children('img').toggleClass('js-opacity');
		}
	);
	$('.photo03 a').hover(
		function(){
			$(this).children('img').toggleClass('js-opacity');
		},
		function(){
			//マウスカーソルが離れた時の処理
		}
	);
	$('.photo04 a').on({
		'mouseenter': function(){
			$(this).children('img').addClass('js-opacity');
		},
		'mouseleave': function(){
			$(this).children('img').removeClass('js-opacity');
		}
	});
});