jQuery Event Mouseenter Example

jQuery 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

You may like

  1. jQuery | Event MouseUp () By Example
  2. Event jQuery Mouseleave By Example
  3. Event jQuery MouseOver() & MouseOut By Example
  4. keyup jquery event example
  5. Jquery Click() Event Method with E.g.
  6. Event jQuery. Blur By Example
  7. jQuery form submit event with example
  8. keydown function jQuery
  9. List of jQuery Events Handling Methods with examples
  10. Jquery Selector by .class | name | #id | Elements
  11. How to Get the Current Page URL in jQuery
  12. jQuery Ajax Get() Method Example
  13. get radio button checked value jquery by id, name, class
  14. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  15. jQuery Get Data Text, Id, Attribute Value By Example
  16. Set data attribute value jquery
  17. select multiple class in jquery
  18. How to Remove Attribute Of Html Elements In jQuery
  19. How to Checked Unchecked Checkbox Using jQuery
  20. jQuery removeClass & addClass On Button Click By E.g.

Leave a Reply

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