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).

</>
Copy
$("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.

</>
Copy
<!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.

</>
Copy
<!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.