js STUDIO

.mouseover()

要素のmouseoverイベントにバインドします。また、mouseoverイベントを実行します。

このメソッドは、1つ目と2つ目は.bind('mouseover', handler)への、3つ目は.trigger('mouseover')への ショートカットです。

mouseoverイベントは対象要素にマウスポインタが入ってきた際に、イベント通知を行います。 ほとんどの要素でこのイベントを受け取る事が可能です。

mouseoverイベントはイベントバブルを処理する方法がmouseenterと異なります。 詳細はデモをご覧ください。

.mouseover( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のmouseoverイベントにバインドします。また、mouseoverイベントを実行します。

引数 説明
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.mouseover( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のmouseoverイベントにバインドします。また、mouseoverイベントを実行します。

引数 説明
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.mouseover() 1.0追加

戻り値:jQuery

mouseoverイベントを発生させます。

デモ

mouseoverとmouseenterが発生した回数を示すテキストに注目してください。 mouseoverは対象要素とその子要素に対してマウスが要素上に乗る度にイベントが発生しますが、 mouseenterは対象要素のみでしかイベントを発生させません。 

<!DOCTYPE html>
<html>
<head>
  <style>
div.out { width:40%; height:120px; margin:0 15px;
          background-color:#D6EDFC; float:left; }
div.in {  width:60%; height:60%;
          background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>

<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>

<script>
  var i = 0;
  $("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });

  var n = 0;
  $("div.enterleave").mouseenter(function() {
    n += 1;
    $(this).find("span").text( "mouse enter x " + n );
  }).mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM