jQuery Mouseover Example
The commonly known onmouseover event in JavaScript is synonym to using mouseover in jQuery. But do you know how to use mouseover in jQuery? In this article, I am going to show how to use the mouseover event in jQuery. This event can be applied for mouseover effects on Divs, Images, etc. So read on to find out more.
How to use jQuery mouseover event
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 rollover, just so that we can see the the name of the div that was hovered upon. I am providing each div with a unique name & ID.
Example: Complete source code HTML + jQuery for the Mouseover Event Example
<html>
<head>
<title>Examples on using the Mouseover 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').mouseover(function() {
alert('Div 1 was hovered upon!');
});
$('#my_div2').mouseover(function() {
alert('Div 2 was hovered upon!');
});
$('#my_div3').mouseover(function() {
alert('Div 3 was hovered upon!');
});
$('#my_div4').mouseover(function() {
alert('Div 4 was hovered upon!');
});
});
</script>
</body>
</html>Simple, isn’t it?
Do you know of any other ways to use jQuery mouseover event? Feel free to suggest by commenting below.