.mouseover()

.mouseover( handler(eventObject) ) 官网原E文: jQuery

描述: 为 "mouseover" 事件绑定一个处理函数,或者触发元素上的 "mouseover" 事件。

  • version added: 1.0.mouseover( handler(eventObject) )

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.4.3.mouseover( [ eventData ], handler(eventObject) )

    eventData将要传递给事件处理函数的数据映射。

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.0.mouseover()

这个函数的第一种用法是 .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').mouseover(function() {
  $('#log').append('<div>Handler for .mouseover() called.</div>');
});

现在当指针进入Outer <div>元素时,“Handler for .mousedown() called.”这个字符串将被添加到<div id="log">。当不同的元素被点击时我们也可以触发这个事件:

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

这些代码执行后,点击Trigger the handler 同样添加这个信息。

此事件类型可以导致由于事件冒泡引起的很多头痛的问题。例如,在这个例子中当鼠标指针移动到Inner元素,mouseover事件将被发送到Inner元素,然后冒泡到Outer元素 。这可能会不合时宜的触发绑定的mouseover处理函数。这可以用一个替代方法,见讨论. mouseenter ()

Example:

Show the number of times mouseover and mouseenter events are triggered. mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

<!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.min.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>

Demo:

jQuery 1.6 API 中文版Clove整理、修订