jQuery Mouseout Example
The commonly known onmouseout event in JavaScript is synonym to using mouseout in jQuery. But do you know how to use mouseout in jQuery? In this article, I am going to show how to use the mouseout event in jQuery. This event can be applied for mouseout effects on Divs, Images, etc. So read on to find out more.
How To Use jQuery mouseout Event
So let’s discuss it using an easy example. Let’s assume that we have few div’s in our page & we would like to alert the ID of the div on mouseout, just so that we can see the the name of the div that was hovered out from. I am providing each div with a unique name & ID.
Here is the complete source code HTML + jQuery for OnMouseout Event in jQuery:
<html>
<head>
<title>jExamples on using Mouseout Event in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#my_div1,
#my_div2,
#my_div3,
#my_div4 {
text-align: center;
width: 200px;
margin-bottom: 10px;
padding: 10px;
}
#my_div1 {
border: 3px solid #CCC;
}
#my_div2 {
border: 3px solid #6C0;
}
#my_div3 {
border: 3px solid #F30;
}
#my_div4 {
border: 3px solid #93F;
}
</style>
</head>
<body>
<div id="my_div1"> This is div 1
<div id="my_div2"> This is div 2
<div id="my_div3"> This is div 3 </div>
</div>
<div id="my_div4"> This is div 4 </div>
</div>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
$('#my_div1').mouseout(function() {
alert('Div 1 was hovered out from!');
});
$('#my_div2').mouseout(function() {
alert('Div 2 was hovered out from!');
});
$('#my_div3').mouseout(function() {
alert('Div 3 was hovered out from!');
});
$('#my_div4').mouseout(function() {
alert('Div 4 was hovered out from!');
});
});
</script>
</body>
</html>That’s it!
Do you know of any other ways to use jQuery mouseout event? Feel free to suggest by commenting below.