jQuery Api Event Mouseenter Example

Event jQuery mouseenter() – how to use mouseenter event with html elements. We are going to show you with simple example how to use mouseenter event.

jQuery Event mouseenter()

The mouseenter() event is occurs when mouse pointer cursor moves over the selected element. mouseenter() event work with an HTML element and perform events on an HTML elements.

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

Syntax

$(selector).mouseenter() 

This triggers the mouseenter for the selected elements.

$(selector).mouseenter(function) 

Parameters

ParameterDescription
FunctionIt is an optional parameter. It executes itself when the mouseenter event is triggered.

Examples

Let’s see the example of jQuery mouseenter method.

<!DOCTYPE html>    
<html>    
<head>    
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>    
$(document).ready(function(){    
    $("#first").mouseenter(function(){    
       $( "div" ).text( "Mouse entered on heading" ).show().fadeOut( 2000 );   
    });    
});    
</script>    
</head>    
<body>    
<h1 id="first">Move cursor here.</h1>   
<div></div>   
</body>    
</html>  

Example 2 – Mouseenter Event

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>  
$(document).ready(function(){  
    $("#second").mouseenter(function(){  
        $("#second").css("background-color", "yellow");  
    });  
    $("#second").mouseleave(function(){  
        $("#second").css("background-color", "blue");  
    });  
});  
</script>  
</head>  
<body>  
<h4 id="second">Move your cursor over this statement.</h4>  
</body>  
</html>  

In this above mouseenter event example, When we will cursor pointer on html elements and leave this selected html elements, this event trigger and change the background color of heading text

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *