.mouseenter()
.mouseenter( handler(eventObject) ) 官网原E文： jQuery
描述： 为 mouse enters（鼠标进入） 事件绑定一个处理函数，或者触发元素上的 mouse enters（鼠标进入） 事件。
-
version added: 1.0.mouseenter( handler(eventObject) )
handler(eventObject)每次事件触发时会执行的函数。
-
version added: 1.4.3.mouseenter( [ eventData ], handler(eventObject) )
eventData将要传递给事件处理函数的数据映射。
handler(eventObject)每次事件触发时会执行的函数。
version added: 1.0.mouseenter()
这个函数的第一种用法是 .bind('mouseenter', handler) 的快捷方式，第二种用法是 .trigger('mouseenter') 的快捷方式。
mouseenterJavaScript事件是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>');
});
现在当指针在Outer <div>元素上移动时，Handler for .mousedown() called.将被添加到<div id="log">。当不同的元素被点击时我们也可以触发这个事件：
$('#other').click(function() {
$('#outer').mouseenter();
});
这些代码执行后，点击Trigger the handler同样警报显示。
mouseenter事件和mouseover的不同之处是事件的冒泡的方式。如果mouseover在这个例子中使用了，然后当鼠标指针在Inner元素上移动，该处理程序将被触发。这通常是不受欢迎的行为。另一方面, mouseenter 事件,当鼠标进入元素而不是一个后代时,它必然,只触发处理程序。因此，在这个例子中，当鼠标进入Outer元素，而不是Inner元素时，处理器被触发。
Example:
Show texts when mouseenter and mouseout event triggering. 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"><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>