マウスオーバー(mouseenter)とマウスアウト(mouseleave)を使ってimgタグのsrc要素を入れ替え表示



jQueryのmouseenterとmouseleaveを使って画像タグの
src要素を入替え表示してみます。

1.CSSの記述例

以下は任意です。

<style>
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
.clMouseArea{
	width:150px;
	margin:0 auto;
	border:solid 1px #CCCCCC;
	cursor:pointer;
}
</style>

2.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".clMouseArea").live({
		mouseenter:function(){
			$(".clMouseArea img").hide().attr('src','mouseenter.jpg').fadeIn(500);
		},
		mouseleave:function(){
			$(".clMouseArea img").hide().attr('src','mouseleave.jpg').fadeIn(500);
		}
	});
});
</script>

3.HTMLの記述例

	<div class="clMouseArea">
    <img src="nomouse.jpg" width="150" height="150" alt="マウスオーバーするエリアの画像" />
    </div><!--/clMouseArea-->

mouseenterとmouseleaveを使ってimgタグのsrcを入れ替えるデモ

良くjQueryのmouseoverやmouseoutを使ってましたが
何が違うんでしょうかね。
その辺ももう少し詳しく調べてみようかと思います。