How to determine if the mouse is on an element in jquery-JS Tutorial-php.cn

How to determine if the mouse is on an element in jquery

藏色散人

Release： 2022-12-30 11:11:19

Original

5011 people have browsed it

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.

How to determine if the mouse is on an element in jquery

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元素里");
});

Copy after login

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>

Copy after login

Rendering:

How to determine if the mouse is on an element in jquery

##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!