Updated June 22, 2023
Introduction to jQuery Mouseover ()
jQuery mouseover() method is an inbuilt jQuery event-handling method. It executes when the mouse pointer enters any selected HTML element. Attaching a handler to this method executes the chosen method as soon as the mouse cursor enters the session.
Syntax:
| Syntax | Parameter Description | Value Type | Version |
| $(selector).mouseover() | NA | NA | 1.0 |
| $(selector). mouseover (Handler/function) | Handler: Accepts the function name, which will be executed, each time the event is triggered. | Handler-Function(event object) | 1.0 |
| $(selector). mouseover ([event data],handler) | eventData: The object containing data that will be passed to the handler
Handler: (Described previously) |
eventData: Any
Handler: Function (event object) |
1.4.3 |
Examples to Implement in JQuery Mouseover ()
Below are examples to implement:
Example #1 – Without Using Any Parameter
- mouseover() method can be used without providing any input argument. One element uses the mouse over an event attached to another element.
- The below example demonstrates the execution of the mouseover event attached to <p> element on click of the ‘button’ element. We define the event to change the background color for the <p> session when the mouse cursor enters or when a user clicks the configured button.
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(){
//mouseover() event is called on 'p'' element
$("p").mouseover(function(){
$("p").css("background-color", "#7DCEA0");
});
$("p").mouseleave(function(){
$("p").css("background-color", "#AEB6BF");
});
//mouseover() event is called by button element to execute on 'p' element
$("#btn1").click(function(){
$("p").mouseover();
});
$("#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 mouseover 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 mouseover() method is called:
After the mouseover() method is called:
- Screen 1: Someone clicks the button ‘Click here to trigger the mouseover event on the ‘p’ element.’
- Screen 2: Someone clicks the button ‘Click here to trigger the mouseleave event on the ‘p’ element.’
- Screen 3: The mouse is entered the <p> element session.
- Screen 4: The mouse exited the <p> element session.
Note: People often use mouseover() and mouseleave() events.
Example #2 – With ‘Handler/Function’ parameter
- For the jQuery mouseover() method, you can pass a function or the name of a handler as an input argument. The chosen element activates the mouseover() event when you move your mouse cursor over it, causing the handler function to execute with the specified input argument value.
- In the code snippet below, we apply the mouseover() event on the <div> session. It has the function as an argument value that 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>mouseover() 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" )
.mouseover(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 mouseover() method is called:
After the mouseover() method is called:
- Screen 1: The mouse once entered the <div> element session.
- Screen 2: The mouse exited the <div> element session once.
- Screen 3: The mouse has entered the <div> element session twice.
- Screen 4: The mouse has twice exited the <div> element session.
Example #3 – mouseover() With ‘eventdata’ and ‘handler’ parameter
- Use this type when the mouseover() event handler method needs input from the provided ‘event data’ argument in the mouseover() method.
- In the given code snippet, the handler function receives the ‘param 1’ value as event data from the ‘event’ object. We define the function 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>mouseover() 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" )
//mouseover() 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’
.mouseover({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 mouseover() method is called:
After the mouseover() method is called:
- Screen 1: The mouse once entered the <div> element session.
- Screen 2: The mouse exited the <div> element session once.
- Screen 3: The mouse has entered the <div> element session twice.
- Screen 4: The mouse has twice exited the <div> element session.
Additional Notes
- This method is similar to the mouseenter() event. The selected element or its child elements can trigger the mouseover() event when the mouse enters, while the mouseenter() event only triggers when the mouse enters the selected element itself.
- This method is a shortcut for .on(“mouseover,” handler ).
- This event type can cause uncertain behavior due to event bubbling. If the mouse pointer traverses over the Inner element, it triggers a mouseover() event for that element, which then propagates to the Outer element.
- You can give multiple ‘eventdata’ inputs within {} with comma separation.
Recommended Articles
This is a guide to jQuery mouseover(). Here we discuss Syntax in JQuery mouseover(), Examples to Implement JQuery mouseover(). You can also go through our other related articles to learn more –
