jQuery mouseenter() event method; In this tutorial, you will learn what is jQuery mouseEnter event and how to use mouseenter event with html elements.
jQuery Event Mouseenter Method
The jquery mouseenter() event takes place when the mouse cursor hovers over the designated element. It functions in conjunction with an HTML element to enact events upon it.
For instance, as you glide your cursor pointer over the specified element, the mouseenter event is activated. Once the mouseenter event is triggered, the mouseenter() method is executed, binding the event handler function to run.
Syntax of jQuery Event Mouseenter Method
$(selector).mouseenter()
This triggers the mouseenter for the selected elements.
$(selector).mouseenter(function)
Parameters of jQuery Event Mouseenter Method
| Parameter | Description |
|---|---|
| Function | It is an optional parameter. It executes itself when the mouseenter event is triggered. |
Examples of jQuery Event Mouseenter Method
Example 1 for jQuery Event Mouseenter Method
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
Recommended jQuery Tutorials
- jQuery | Event MouseUp () By Example
- Event jQuery Mouseleave By Example
- Event jQuery MouseOver() & MouseOut By Example
- keyup jquery event example
- Jquery Click() Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
