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.

In this tutorial, you will learn about jQuery mouseenter() method, its syntax and usage, with examples.

Syntax 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

The following examples help you understand the usage of jQuery mouseenter() method :

1 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>

2 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>

Conclusion

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