Home > Article > Web Front-end > How to determine if the mouse is on an element in jquery
How to determine if the mouse is on an element in jquery
- 藏色散人Original
- 2021-01-07 10:42:184993browse
Jquery method to determine whether the mouse is on the element: 1. Use the mouseover method to determine whether the mouse is on the element; 2. Use the mouseout method to determine whether the mouse is on the element.
The operating environment of this tutorial: windows7 system, jquery1.9.1 version, Dell G3 computer.
Recommended: jQuery Tutorial
In jquery, you can use the mouseover() and mouseout() methods to determine whether the mouse is on the element.
jquery determines whether the mouse is on the element
When the mouse pointer is over the element, the mouseover event occurs. When the mouse pointer moves away from the element, mouseout occurs. event.
PS: Unlike mouseenter/mouseleave events, mouseover/mouseout events will be triggered whether the mouse pointer enters/leaves the selected element or any child element. The mouseenter/mouseleave events are only triggered when the mouse pointer enters/leaves the selected element.
$("#aijquery").mouseover(function(){
$(".primary").text("方法二：鼠标在这个DIV元素里");
}).mouseout(function(){
$(".primary").text("方法二：鼠标不在这个DIV元素里");
});Disadvantages: When the page is initialized, that is, when the page is just opened, it cannot be judged. You can only judge it after moving the mouse over the div once and activating the mouseover event. For details, see the above That online example demonstration.
Example:
<!doctype html>
<html>
<head>
<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body class="text-center p-5">
<DIV class="border border-danger p-5">
<Div id="aijquery" class="border border-dark p-3 alert-success">
<span class="primary border border-dark">inifo</span><br>
</Div>
</DIV>
<script language="JavaScript">
$("#aijquery").mouseover(function(){
$(".primary").text("鼠标在这个DIV元素里");
}).mouseout(function(){
$(".primary").text("鼠标不在这个DIV元素里");
});
</script>
</body>
</html>Rendering:
##mouseover() method
When The mouseover event occurs when the mouse pointer is over an element. The mouseover() method triggers the mouseover event, or adds a function that runs when the mouseover event occurs.mouseout() method
The mouseout event occurs when the mouse pointer leaves the selected element. The mouseout() method triggers the mouseout event, or adds a function that runs when the mouseout event occurs. For more programming-related knowledge, please visit:Programming Teaching! !
The above is the detailed content of How to determine if the mouse is on an element in jquery. For more information, please follow other related articles on the PHP Chinese website!