jquery mouseenterメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery mouseenter()メソッド

mouseenterメソッドは、セレクタで指定した要素にマウスオーバーしたときに実行されるメソッドです
mouseoverメソッドとは違い指定した要素の子要素にマウスがのった場合は何もおこりません。mouseoverメソッドは子要素にマウスがのっても再び処理を発動します

$("セレクタ").mouseenter(function(){
	マウスオーバーしたときの処理
});

指定したHTML要素をマウスオーバーしたときにイベントを実行する

セレクタで指定したHTML要素にマウスオーバーしたときに実行したそれぞれの処理回数を表示します。子要素にロールオーバーしたときの違いを確かめてください。
最初にfooとfoo2の変数を作ります。#hogeにロールオーバーしたときにmouseenter()とmouseenter()の処理を入れます。 ++fooはインクリメントといって数を1だけ変数にプラスします

jquery

$(function() {
var foo=0;
var foo2=0;

	$("#hoge").mouseenter(function(){
	$("#hoge3").text('mouseenterを発動した回数'+ ++foo);
	})
	.mouseover(function(){
	$("#hoge4").text('mouseoverを発動した回数'+ ++foo2);
	})
});
css
#hoge{
 border: solid 1px;
 padding: 50px;
 }
#hoge2{
 border: solid 1px;
  padding: 20px;
   }

html

<div id="hoge">マウスを乗っけてください
<div id="hoge2">子要素</div>
<span id="hoge3">mouseenterを発動した回数</span><br>
<span id="hoge4">mouseoverを発動した回数</span>
</div>

実行後

マウスを乗っけてください
子要素
mouseenterを発動した回数
mouseoverを発動した回数






(C)2012 ホームページ作成無料