.hover()【《ホバー》イベントハンドラ設定】

メモ

  • 《ホバー》イベントハンドラ設定
    • 下記のイベントハンドラを一度に設定
      《mouseenter：マウス進入 (バブリングなし)》イベントハンドラ
      《mouseleave：マウス退出 (バブリングなし)》イベントハンドラ
    • 解除は、.off()【イベントハンドラ解除】
      .off( "mouseenter mouseleave" )

構文

説明構文戻り値
《ホバー》
イベントハンドラ設定 		.hover( handlerIn, handlerOut )  1.0

handlerIn：《マウス進入 (バブリングなし)》イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)
handlerOut：《マウス退出 (バブリングなし)》イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)

.mouseenter( handlerIn ) .mouseleave( handlerOut ) の省略形 		jQuery
.hover( handlerInOut )  1.4

handlerInOut：《マウス進入 (バブリングなし)》・《マウス退出 (バブリングなし)》イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)

.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 )