Introduction to jQuery mouseover()
jQuery mouseover() method is an inbuilt jQuery event-handling method. It gets executed when the mouse pointer enters any selected HTML 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).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 which 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. 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 mouseover event attached to <p> element on 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(){
//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: The button ‘Click here to trigger the mouseover event on ‘p’ element’ is clicked.
- Screen 2: The button ‘Click here to trigger the mouseleave event on ‘p’ element’ is clicked.
- Screen 3: The mouse is entered the <p> element session.
- Screen 4: The mouse is exited the <p> element session.
Example #2 – With ‘Handler/Function’ parameter
- For jQuery mouseover(), a function or handler name can be passed as an input argument. When the mouse cursor enters the selected element, the mouseover() event gets called that triggers the handler function which is provided as an input argument value.
- In the below code snippet, mouseover() 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>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 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.
Example #3 – mouseover() With ‘eventdata’ and ‘handler’ parameter
- This type is used where, the handler method associated with the mouseover() event, uses the ‘event data’ argument value, given in the mouseover() 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>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 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.
Additional Notes
- This method is similar to the mouseenter() 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( “mouseover”, handler ).
- Basically this event type can cause uncertain behavior due to event bubbling. If the mouse pointer traverses over the Inner element, a mouseover() is sent to that but trickles up to Outer as well.
- Multiple ‘eventdata’ inputs can be given within {} with comma-separated.
Recommended Articles
This is a guide to jQuery mouseover(). Here we discuss Syntax to in JQuery mouseover(), Examples to Implement JQuery mouseover(). You can also go through our other related articles to learn more –
