The jQuery mouseover() method is used to attach a function to run when a mouseover event occurs i.e., when the mouse cursor runs over the selected element.
The mouseover and mouseenter methods are more or like similar. The only difference lies in event triggering. The mouseenter event triggers if the mouse pointer enters the selected element whereas the mouseover event triggers if the mouse cursor enters any child elements of the selected element or the selected element itself.
Syntax:
To trigger the mouseover event for selected elements.
$(selector).mouseover()
To add a function to the mouseover event.
$(selector).mouseover(function)
Function:
- It is an optional parameter.
- The function parameter specifies the function to run when the event occurs.
Example1:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
("body").mouseout(function(){
$("body").css("background-color", "orange");
});
});
</script>
</head>
<body>
<h1> Hello </h1>
<p>Move your cursor over this paragraph.</p>
</body>
</html>
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
div.out {
width: 60%;
height: 120px;
margin: 15px;
background-color: turquoise;
}
div.in {
width: 60%;
height: 60%;
background-color: blue;
margin: 10px auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="out">
<span style="padding:20px">move your mouse</span>
<div class="in"></div>
</div>
<script>
$( "div.out" )
.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
})
.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
});
</script>
</body>
</html>