Updated March 23, 2023
Introduction to jQuery mouseenter()
jQuery mouseenter() method is an inbuilt jQuery event-handling method. It gets executed when the mouse pointer enters an HTML element or mouse cursor is over the selected element. When a handler is attached to this method, the handler gets executed on the selected method once the mouse cursor enters the session.
Syntax:
|
Syntax |
Parameter description | Value Type |
Version |
|
$(selector).mouseenter() |
NA | NA |
1.0 |
|
$(selector). mouseenter (Handler/function) |
Handler: Accepts the function name which will be executed, each time the event is triggered. | Handler: Function(event object). |
1.0 |
|
$(selector). mouseenter ([event data],handler) |
1. eventData: The object containing data that will be passed to the handler.
2. Handler: (Described previously). |
1. eventData: Any
2. Handler: Function (event object). |
1.4.3 |
Examples to Implement jQuery mouseenter()
Here are some of the examples for better understanding :
1. Without using Any Parameter
mouseenter() method can be used without providing any input argument. It is used the mouse over event attached to one element needs to be called by another element. The below example demonstrates the execution of the mouseenter event attached to the <p> element on the click of the ‘button’ element. The event is defined to change the background color for <p> session when the mouse cursor enters there or the configured button is clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//mouseenter() event is called on 'p'' element
$("p").mouseenter(function(){
$("p").css("background-color", "#7DCEA0");
});
$("p").mouseleave(function(){
$("p").css("background-color", "#AEB6BF");
});
//mouseenter() event is called by button element to execute on 'p' element
$("#btn1").click(function(){
$("p").mouseenter();
});
$("#btn2").click(function(){
$("p").mouseleave();
});
});
</script>
</head>
<body style="background-color: beige;">
<p style="font-family: Arial, Helvetica, sans-serif;font-size: 30px;">This session is defined under 'p' html element</p>
<button id="btn1">Click here to trigger mouseenter event on 'p' element</button><br><br>
<button id="btn2">Click here to trigger mouseleave event on 'p' element</button>
</body>
</html>Output:
Before the mouseenter() method is called,
After the mouseenter() method is called,
Screen 1: The button ‘Click here to trigger the mouseenter event on the ‘p’ element’ is clicked.
Screen 2: The button ‘Click here to trigger the mouseleave event on the ‘p’ element’ is clicked.
Screen 3: The mouse is entered the <p> element session.
Screen 4: The mouse is exited the <p> element session.
2. With ‘Handler/Function’ Parameter
For jQuery mouseenter(), a function or handler name can be passed as an input argument. When the mouse cursor enters the selected element, the mouseenter() event gets called that triggers the handler function which is provided as an input argument value. In the below code snippet, mouseenter() event is applied on the <div> session. It has the function as argument value which counts each time, the mouse cursor enters the ‘div’ session and displays the count on the page.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseenter() with handler</title>
<style>
div.out {
width: 40%;
height: 250px;
margin: 0 15px;
background-color:#F7DC6F ;
float: left;
}
div.in {
width: 60%;
height: 50%;
background-color:#E5E8E8 ;
margin: 10px auto;
}
p {
line-height: 2em;
margin: 1em;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="background-color: beige;">
<div class="in enterleave"><p>Move your mouse over here</p><p>0</p></div>
<script>
$( "div.overout" )
var n = 0;
$( "div.enterleave" )
//mouseenter() event is called on 'div' element
.mouseenter(function() {
$( "p", this ).first().text( "Number of times mouse entered:" );
//increases the count, each time the event is called
$( "p", this ).last().text( ++n );
})
.mouseleave(function() {
$( "p", this ).first().text( "Number of times mouse exited:" );
});
</script>
</body>
</html>Output:
Before the mouseenter() method is called,
After the mouseenter() method is called,
Screen 1: The mouse has entered the <div> element session once.
Screen 2: The mouse has exited the <div> element session once.
Screen 3: The mouse has entered the <div> element session twice.
Screen 4: The mouse has exited the <div> element session twice.
3. With ‘eventdata’ and ‘handler’ Parameter
This type is used where, the handler method associated with the mouseenter() event, uses the ‘event data’ argument value, given in the mouseenter() method, as input. In the below code snippet, value for ‘param 1’ is given as event data value which is passed to the handler function through the ‘event’ object. The function is defined to count each time, the mouse enters <div> session and to display the count value along with appending the param1 string value.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseenter() with handler</title>
<style>
div.out {
width: 40%;
height: 250px;
margin: 0 15px;
background-color:#F7DC6F ;
float: left;
}
div.in {
width: 60%;
height: 50%;
background-color:#E5E8E8 ;
margin: 10px auto;
}
p {
line-height: 2em;
margin: 1em;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="background-color: beige;">
<div class="in enterleave"><p>Move your mouse over here</p><p>0</p></div>
<script>
$( "div.overout" )
var n = 0;
$( "div.enterleave" )
//mouseenter() event is called by button element to execute on 'p' element,
//the handler input is the function to count each time, the mouse cursor has //entered the ‘p’ session
//eventdata input is ‘param1’
.mouseenter({param1:' time(s), the mouse has entered here.'},function(event) {
$( "p", this ).first().text( "Display the count of entries appending the event data:" );
$( "p", this ).last().text((n+=1)+event.data.param1);
})
.mouseleave({param1:' time(s), the mouse has exited.'},function(event) {
$( "p", this ).first().text( "Display the count of exits appending the event data:" );
$( "p", this ).last().text(n+event.data.param1);
});
</script>
</body>
</html>Output:
Before the mouseenter() method is called,
After the mouseenter() method is called,
Screen 1: The mouse has entered the <div> element session once.
Screen 2: The mouse has exited the <div> element session once.
Screen 3: The mouse has entered the <div> element session twice.
Screen 4: The mouse has exited the <div> element session twice.
Conclusion
This method is similar to the mouseover() event. The difference exists as mouseover() event can be triggered when the mouse enters the selected element or its child elements as well whereas the mouseenter() event gets triggered only when the mouse enters the selected element. This method is a short cut for .on(“mouseenter”, handler). Basically, this event belongs to Internet Explorer, but the event’s general utility enables jQuery to simulate the event regardless of the browser. Multiple ‘eventdata’ inputs can be given within {} with comma-separated.
Recommended Articles
This is a guide to jQuery mouseenter(). Here we discuss the syntax, Parameters, and different examples to implement jQuery mouseenter() with code implementation. You can also go through our suggested articles to learn more –
