jquery判斷鼠標是否在元素上的方法:使用mouseover方法實現判斷鼠標是否在元素上;通過mouseout方法實現判斷鼠標是否在元素上。
當鼠標指針位于元素上方時,會發生 mouseover 事件,當鼠標指針從元素上移開時,發生 mouseout 事件。
和 mouseenter/mouseleave 事件不同,不論鼠標指針進入/離開被選元素還是任何子元素,都會觸發 mouseover/mouseout 事件。只有在鼠標指針進入/離開被選元素時,才會觸發 mouseenter/mouseleave 事件。
缺點:在頁面初始化時,也就是剛打開頁面時,是判斷不出來的,只有把鼠標移上div上一次,激活了mouseover事件后,才能判斷,具體可以看上面給的那個在線實例演示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery判斷鼠標是否位于元素上</title> <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0> <script src="http://www.suneven.com/template/API/jc/jquery-3.5.1.min.js"></script> </head> <body> <div id="mouseDiv" style="width:300px;height:300px;background:red;"> <p id="tipText"></p> </div> <script type="text/javascript"> $("#mouseDiv").mouseover(function(){ $("#tipText").html("鼠標在該元素上"); }).mouseout(function(){ $("#tipText").html("鼠標不在該元素上"); }); </script> </body> </html>
mouseover() 方法
當鼠標指針位于元素上方時,會發生 mouseover 事件。mouseover() 方法觸發 mouseover 事件,或添加當發生 mouseover 事件時運行的函數。
mouseout() 方法
當鼠標指針離開被選元素時,會發生 mouseout 事件。mouseout() 方法觸發 mouseout 事件,或添加當發生 mouseout 事件時運行的函數。