The mouseenter event occurs when the mouse pointer is over (enters) the selected element.The mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs. So we can say that The mouseenter() method adds an event handler function to an HTML element. This function is executed, when the mouse pointer enters the HTML element.
Syntax:-
$(selector).mouseenter()
|
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#h1").mouseenter(function(){
$( "div" ).text( " Mouse Pointer entered on heading" ).show().fadeOut( 4000 );
});
});
</script>
</head>
<body>
<h1 id="h1">Move Mouse Pointer on this heading </h1>
<div></div>
</body>
</html>
|
Difference between mousemove, mouseenter and mouseover.
Ø The mouseover event triggers when the mouse pointer enters the div element, and its child elements.
Ø The mouseenter event is only triggered when the mouse pointer enters the div element.
Ø The onmousemove event triggers every time the mouse pointer is moved over the div element.
|
Example :-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
h3 {
background-color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var z = 0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x += 1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y += 1);
});
$("div.move").mousemove(function(){
$(".move span").text(z += 1);
});
});
</script>
</head>
<body>
<h1>Example of Mouseover , MouseEnter and MouseMove</h1>
<div class="over" style="background-color:red">
<h3>Mouseover event triggered: <span></span></h3>
</div>
<div class="enter" style="background-color:green">
<h3>Mouseenter event triggered: <span></span></h3>
</div>
<div class="move" style="background-color:yellow">
<h3>Mousemove event triggered: <span></span></h3>
</div>
</body>
</html>
|
