jQuery mouseEnter event method; Through this tutorial, i will show you what is jQuery mouseEnter event method and how to use mouseenter event with html elements.
jQuery jQuery MouseEnter Event Method
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 jQuery jQuery MouseEnter Event Method
$(selector).mouseenter()
This triggers the mouseenter for the selected elements.
$(selector).mouseenter(function)
Parameters of jQuery jQuery MouseEnter Event Method
| Parameter | Description |
|---|---|
| Function | It is an optional parameter. It executes itself when the mouseenter event is triggered. |
Example 1 – jQuery jQuery MouseEnter Event 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(){
$( "#my-div" ).text( "Mouse entered on heading" ).show().fadeOut( 2000 );
});
});
</script>
</head>
<body>
<h1 id="first">Move cursor here.</h1>
<div id="my-div"></div>
</body>
</html>
Demo 1 – jQuery jQuery MouseEnter Event Method
Move cursor here.
Example 2 – jQuery jQuery MouseEnter Event Method
<!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>
Demo 2 – jQuery jQuery MouseEnter Event Method
Move your cursor over this statement.
Note that :- When you will cursor pointer on html elements and leave this selected html elements, this event trigger and change the background color of heading text.