mouseover()

.mouseover( handler(eventObject) )

מחזירה: jQuery

תיאור: מקשר מטפל אירוע לאירוע "mouseover" JavaScript, או מפעיל אירוע הזה על אלמנט.

.mouseout( handler(eventObject) )

הוספה בגרסה: 1.0

handler(eventObject)

פונקציה

פונקציה מופעלת כל פעם, כאשר מופעל אירוע.

.mouseout( )

הוספה בגרסה: 1.0

.mouseout( [ eventData ], handler(eventObject) )

הוספה בגרסה: 1.4.3

eventData

מפה

המפה של הנתונים שתעבור למטפל האירוע.

handler(eventObject)

פונקציה

פונקציה לביצוע כל פעם שאירוע מופעל.

שיטה הזו היא קיצור של .bind('mouseover', handler) בוריאציה הראשונה, ו- .trigger('mouseover') בשניה.

אירוע mouseover נשלח לאלמנט, כאשר מצביע של עכבר נכנס לתוך האלמנט. כל אלמנט HTML יכול לקבל אירוע הזה.

לדוגמא, נתבונן על HTML:

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

תוצאת הפעלה קוד לעיל:

Outer

Inner

Trigger the handler

מטפל אירוע ניתן לקשר לכל אלמנט:

$('#outer').mouseover(function() {
  $('#log').append('<div>Handler for .mouseover() called.</div>');
});

עכשיו, כאשר מצביע של עכבר נמצאה מעל Outer <div>, ההודעה תצורף ל- <div id="log">. אנחנו גם יכולים להפעיל אירוע, כאשר אובייקט שני נלחץ:

$('#other').click(function() {
  $('#outer').mouseover();
});

אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.

סוג אירוע הזה יכול לגרום לכאב ראש רבים בשל מבעבע האירוע. למשל, כאשר מצביע של עכבר מעל האלמנט Inner בדוגמא הזו, אירוע mouseover ישלח עליו, ואחרי זה על Outer. זה יכול לגרום לקפיצה אל מטפל mouseover בזמן הלא מתאים. ראו דיון על .mouseenter() לחלופה שימושית.

דוגמאות

מציג טקסט כשה אירועים mouseover ו- mouseout מופעלים. Mouseover מופעל כשהמצביע עכבר נכנס או יוצא משטח של אלמנט הילד, בזמן ש- mouseenter לא עושה זאת.

    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמא - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });
    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
    });
  });
  </script>
  <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>
</head>
<body>
  
<div class="out overout"><p>move your mouse</p>
<div class="in overout"><p>move your mouse</p>
<p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p>
<div class="in enterleave"><p>move your mouse</p>
<p>0</p></div><p>0</p></div>
</body>
</html>