.hover()【《ホバー》イベントハンドラ設定】
メモ
- 《ホバー》イベントハンドラ設定
- 下記のイベントハンドラを一度に設定
《mouseenter:マウス進入 (バブリングなし)》イベントハンドラ
《mouseleave:マウス退出 (バブリングなし)》イベントハンドラ - 解除は、.off()【イベントハンドラ解除】
.off( "mouseenter mouseleave" )
- 下記のイベントハンドラを一度に設定
構文
説明 | 構文 | 戻り値 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
《ホバー》 イベントハンドラ設定 | .hover( handlerIn, handlerOut ) 1.0 handlerIn:《マウス進入 (バブリングなし)》イベントハンドラ
.mouseenter( handlerIn ) .mouseleave( handlerOut ) の省略形 | jQuery | ||||||||||||
.hover( handlerInOut ) 1.4 handlerInOut:《マウス進入 (バブリングなし)》・《マウス退出 (バブリングなし)》イベントハンドラ
.on( "mouseenter mouseleave", handlerInOut ) の省略形 | jQuery |
関連
例
<style>
.classHover { background-color:cyan; }
#div1, #div2 { width:300px; height:100px; border:2px black solid; }
</style>
<p id="div1">.hover( handlerIn, handlerOut )<br><br><span id="type1"></span></p>
<p id="div2">.hover( handlerInOut )<br><br><span id="type2"></span></p>
<script>
$("#div1").hover(
function(eventObject) { $(this).addClass("classHover"); $("#type1").text(eventObject.type);},
function(eventObject) { $(this).removeClass("classHover"); $("#type1").text(eventObject.type);}
);
$("#div2").hover(function(eventObject) {
$("#type2").text(eventObject.type);
});
</script>
.hover( handlerIn, handlerOut )
.hover( handlerInOut )