.mouseover()
返回: jQuery
.mouseover( handler )
描述：把某个事件函数绑定到JavaScript事件“mouseover”上，或者在某个元素上触发该事件。
加入于: 1.0
.mouseover( handler )加入于: 1.4.3
.mouseover( [eventData ], handler )- eventData类型：Anything一个对象，它包含了要传递给事件处理函数的数据。
- handler一个函数，在每次事件被触发时执行它。
加入于: 1.0
.mouseover()该签名不接受任何参数。
该方法，在前两种变体中，是.on('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>" );
});
现在，当鼠标指针在id="outer"这个div内部移动时，一条消息会追加到<div id="log">中。当别的元素被点击的时候，也能够触发这个事件：
$( "#other" ).click(function() {
$( "#outer" ).mouseover();
});
在执行代码之后，在“Trigger the handler”上点击，也将追加这条消息。
因为事件冒泡，这个事件类型可能导致很多令人头痛的问题。比如说，在本示例中，当鼠标指针在id="inner"这个元素上移动时，一个 mouseover事件会发送到那里。这可能在不适当的时候触发绑定的mouseover处理函数。参见对.mouseenter()的讨论以了解有用的替代方法。
其它说明
- 因为
.mouseover()方法是.on( "mouseover", handler )的简写，所以可以用.off( "mouseover" )来分离。
示例
显示mouseover事件和mouseenter事件的触发次数。当鼠标指针移到它的子元素内时，也会引发mouseover事件，与此同时，只有当鼠标指针移进绑定的元素的时候，才会引发mouseenter事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseover 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">
<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>
演示结果