mouseover([[data],fn])
概述
当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
参数
fn 在每一个匹配元素的mouseover事件中绑定的处理函数
[data],fn data:mouseover([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseover事件中绑定的处理函数
mouseout([[data],fn])
概述
当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
参数
fn 在每一个匹配元素的mouseout事件中绑定的处理函数
[data],fn data:mouseout([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseout事件中绑定的处理函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <title></title> <script type="text/javascript"> x = 0; y = 0; $(document).ready(function() { $("#over").mouseout(function() { $("#over span").text(x += 1); }); $("#out").mouseover(function() { $("#out span").text(y += 1); }); }); </script> </head> <body> <div id="over" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;top: 10px;left: 10px;"> <h2 style="background-color:white;">触发Mouseover 事件：<span></span></h2> </div> <br /> <div id="out" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;left: -330px;top: 150px;"> <h2 style="background-color:white;">触发 Mouseout 事件：<span></span></h2> </div> </body> </html>
mouseenter([[data],fn])
概述
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
参数
fn 在每一个匹配元素的mouseenter事件中绑定的处理函数。
[data],fn data:mouseenter([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseenter事件中绑定的处理函数
mouseleave([[data],fn])
概述
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
参数
fn 在每一个匹配元素的mouseleave事件中绑定的处理函数。
[data],fn data:mouseleave([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseleave事件中绑定的处理函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <title></title> <script type="text/javascript"> x = 0; y = 0; $(document).ready(function() { $("#over").mouseenter(function() { $("#over span").text(x += 1); }); $("#out").mouseleave(function() { $("#out span").text(y += 1); }); }); </script> </head> <body> <div id="over" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;top: 10px;left: 10px;"> <h2 style="background-color:white;">触发Mouseenter 事件：<span></span></h2> </div> <br /> <div id="out" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;left: -330px;top: 150px;"> <h2 style="background-color:white;">触发 Mouseleave 事件：<span></span></h2> </div> </body> </html>