jQuery mouseenter()
mouseenter() handles one of the Mouse Events, mouse entering the area spanned by HTML element.
jquery mouseenter() method could be called on HTML Element(s) filtered via jQuery Selector.
Syntax - jQuery mouseenter()
Following is the syntax to use jQuery mouseenter() method :
To attach a mouse enter listener to HTML Element(s) $("selector").mouseenter(function(){
// your javascript/jquery statements here
});Examples - jQuery mouseenter()
Following examples help you understand the usage of jQuery mouseenter() method :
Example - Change text of Paragraph when mouse enters
In the following example, we have attached mouse enter event listener to paragraph elements. Whenever the mouse enters the area spanned by a paragraph, the mouse enter event is triggered and runs the code in the function.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$( this ).html("You entered the mouse pointer into my area.");
});
});
</script>
</head>
<body>
<p>A paragraph.</p>
<p>Another paragraph.</p>
</body>
</html>
Example - Change background color of div when mouse enters
In the following example we demonstrate the functioning of jQuery mouseenter() method by changing the background color of a div when mouse enters its area.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#colorBox").mouseenter(function(){
$( this ).css("background-color","#484");
$( this ).text("You entered mouse into the area that I span.").css("color","white");
});
});
</script>
</head>
<body>
<div id="colorBox" style="width:300px;height:200px;background-color:#CCC;padding:10px;"></div>
</body>
</html>
Conclusion
In this jQuery Tutorial, we have learnt jQuery mouseenter() method : Syntax and Usage with examples.