The Mouseout event occurs when the mouse pointer moves away from the element. This event is most often used in conjunction with the MouseOver event.
The Mouseout () method triggers the Mouseout event, or a function that runs when the Mouseout event occurs.
The Mouseout () event triggers the Mouseout event, regardless of whether the mouse pointer leaves the selected element or any child elements.
The MouseLeave event triggers the MouseLeave event only if the mouse pointer leaves the selected element.
Take a look at the example below and we understand clearly the difference between these two events.
Example
$ ("Li"). each (function (i) {
Delete the mouse across the display and hide
$ (this). MouseOver (function () {
$ (this). Find (". Del"). FadeIn (10);
})
$ (this). MouseLeave (function () {
$ (this). Find (". Del"). fadeout (10);
})
})
In the code above, if you don't use MouseLeave instead of mouseout, you'll find that you haven't left the class name. del this div sometimes flashes. That's because you may have left the child elements of the div, so you'll start mouseout events. The difference between the specific MouseLeave and mouseout is mainly as follows: two.
1. The Mouseout event is triggered regardless of whether the mouse pointer leaves the selected element or any child elements.
2. The MouseLeave event is triggered only when the mouse pointer leaves the selected element.
Example
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.softwhy.com/"/>
<title> Ant Tribe </title>
<style type= "Text/css" >
div {
width:150px;
height:150px;
Background-color:green;
margin-top:10px;
}
. Children {
width:80px;
height:80px;
background-color:red;
}
span {
font-size:12px;
color:red;
}
</style>
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Mouseout"). Mouseout (function () {
$ ("span"). Text ("Mouseout event triggered");
})
$ (". MouseLeave"). MouseLeave (function () {
$ ("span"). Text ("MouseLeave event triggered");
})
});
</script>
<body>
<div class= "Mouseout" >
<div class= "Children" ></div>
</div>
<div class= "MouseLeave" >
<div class= "Children" ></div>
</div>
<span></span>
</body>
The code test above may not be convenient, but you can also test that the Mouseout event can be triggered when the mouse pointer is moved from a matching element or a child element of a matching element, but only if the mouse pointer is removed from the matching element to trigger the MouseLeave event.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
