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>
<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>
Try Online

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>
<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>
Try Online

Conclusion

In this jQuery Tutorial, we have learnt jQuery mouseenter() method : Syntax and Usage with examples.