.mouseenter()
返回: jQuery
.mouseenter( handler )
描述：把某个事件处理函数绑定到一个元素上，当鼠标进入这个元素时引发该函数，或者在某个元素上触发该事件。
加入于: 1.0
.mouseenter( handler )加入于: 1.4.3
.mouseenter( [eventData ], handler )- eventData类型：Anything一个对象，它包含了要传递给事件处理函数的数据。
- handler一个函数，在每次事件被触发时执行它。
加入于: 1.0
.mouseenter()该签名不接受任何参数。
该方法，在前两种变体中，是.on( "mouseenter", handler )的简写，在第三种变体中，是.trigger( "mouseenter" )的简写。
JavaScript事件mouseenter是Internet Explorer专有的。因为该事件在平时很有用，jQuery模拟了这个事件，因此它可以用在任何浏览器中。当鼠标指针进入一个元素时，该事件会被发送到该元素。任何HTML元素都能接收该事件。
举个例子，设想下面的HTML：
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
该事件处理函数可以绑定到任何元素上：
$( "#outer" ).mouseenter(function() {
$( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" );
});
现在，当鼠标指针移到id="outer"这个div上时，一条消息会追加到<div id="log">中。当别的元素被点击时，也可以触发该事件：
$( "#other" ).click(function() {
$( "#outer" ).mouseenter();
});
在执行代码之后，点击“Trigger the handler”也会追加这条消息。
在处理事件冒泡的方式上，mouseleave事件不同于mouseout事件。如果在这个示例中使用moseover事件，则当鼠标指针移到id="inner"这个元素上时，也会触发处理函数。这通常是不想要的行为。另一方面，mouseenter事件，只有当鼠标进入到它绑定的元素时，才会触发处理函数，进入绑定元素的后代元素不会触发。因此，在这个救命中，当鼠标指针进入id="outer"这个元素时，会触发处理函数，但是进入id="inner"这个元素时不会触发处理函数。
其它说明
- 因为
.mouseenter()方法是.on( "mouseenter", handler )的简写，所以可以用.off( "mouseenter" )来分离。
示例
当触发mouseenter事件和mouseout事件时，显示文本。当鼠标指针移到子元素上时，也会引发mouseover事件，与此同时，只有当指针指针移进绑定的元素时才会引发mouseenter事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseenter demo</title>
<style>
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</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>
<script>
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" )
.mouseenter(function() {
$( "p:first", this ).text( "mouse enter" );
$( "p:last", this ).text( ++n );
})
.mouseleave(function() {
$( "p:first", this ).text( "mouse leave" );
});
</script>
</body>
</html>
演示结果