jQuery mouseenter()

The mouseenter() method adds an event handler function to an HTML element. This function is executed, when the mouse pointer enters the HTML element.

When you enter your mouse cursor over the selected element, it triggers the mouseenter event and once the mouseenter event is occurred, it executes the mouseenter() method to attach the event handler function to run.

This event is generally used together with mouseleave() event.

Syntax:

It triggers the mouseenter event for selected elements.

It adds a function to the mouseenter event.

Parameters of jQuery mouseenter() event

Parameter	Description
Function	It is an optional parameter. It executes itself when the mouseenter event is triggered.

Example of jQuery mouseenter() event

Let's take an example to demonstrate jQuery mouseenter() event.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#h1").mouseenter(function(){  
       $( "div" ).text( "Mouse entered on heading" ).show().fadeOut( 2000 ); 
    });  
});  
</script>  
</head>  
<body>  
<h1 id="h1">Enter this heading.</h1> 
<div></div> 
</body>  
</html>  

Test it Now

Output:

Enter this heading.

jQuery mouseenter() event example 2

Let's see another example of jQuery mouseenter() event.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $("p").css("background-color", "lightgreen");
    });
    $("p").mouseleave(function(){
        $("p").css("background-color", "yellow");
    });
});
</script>
</head>
<body>
<p>Move your mouse cursor over this statement.</p>
</body>
</html>
  

Test it Now

Output:

Move your mouse cursor over this statement.

Next TopicjQuery mouseleave()

← prev next →