jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()
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"> <scripttype="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;width: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;width: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;width: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;width:300px;float:left;position: relative;left: -330px;top: 150px;"> <h2 style="background-color:white;">觸發 Mouseleave 事件：<span></span></h2> </div> </body> </html>