jQuery mouseover() vs mouseenter() Method
You are Here:
jQuery mouseover() vs mouseenter() Method
The jQuery mouseover method triggers when a mouse is over a specified element.
The jQuery mouseenter method triggers when a mouse entered a specified element.
Note: Unlike mouseenter event, the mouseover event to a parent element will affect its child elements.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
h1 + div{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: center;
}
.parentDiv{
border: 1px solid black;
width: 250px;
margin: 5px;
}
.childDiv{
border: 1px solid red;
width: 180px;
height: 50px;
margin: 10px 25px;
}
</style>
</head>
<body>
<h1>jQuery mouseover() vs mouseenter() Method</h1>
<div>
<div class="parentDiv mymouseover">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>mouseover - <span id="point">0</span></p>
</div>
<div class="parentDiv mymouseenter">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>mouseenter - <span id="point1">0</span></p>
</div>
</div>
<script>
$(document).ready(function(){
var count = 0;
var count1 = 0;
$(".mymouseover").mouseover(function(e){
count += 1;
$("#point").text(count);
});
$(".mymouseenter").mouseenter(function(e){
count1 += 1;
$("#point1").text(count1);
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
