Examples of Rollover Effects using jQuery

Before we move on with the examples, here’s the basic syntax for rollovers using jQuery. You can apply the same principle to achieve rollovers for any html elements.

Basic Syntax for jQuery Rollover using Element’s ID

$("#element_id").on('hover', function(e) {
//do this
});

Basic Syntax for jQuery Rollover using Element’s class

$(".element_class").on('hover', function(e) {
//do this
});

Back to jQuery Rollovers Examples

Let’s assume that we have some html elements in our web page. Let’s look at some rollover examples for these elements. Here’s the full HTML source code. jQuery code for the rollovers will be provided as we go along.

Example 1: Rollover Effect using .slideToggle() method in jQuery

Toggle a Div when you rollover a hyperlink or when it is hovered upon. The hyperlink has a class of “link”. This has a rollover effect of “slow”. You can also use “fast” to speed up the toggle.

$(document).ready(function() {

$("a.link").on('hover', function(e) {
$('#my_div').slideToggle('slow');
});

});

Example 2: Rollover effect using .hide() in jQuery

Assuming that you have a div with ID “my_div”, you want to hide this Div from display when you rollover a hyperlink with class “link”.

$(document).ready(function() {

$("a.link").on('hover', function(e) {
$('#my_div').hide();
});

});

Example 3: Rollover effect using .show() in jQuery

If you have followed the Example 2 above, you will notice that when you rollover hyperlink, it hides the div. Now if you want to show that div, you can use the following jQuery code:

$(document).ready(function() {

$("a.link").on('hover', function(e) {
$('#my_div').show();
});

});

Example 4: Image Rollover effect using jQuery (You must check it out!)

Here is a jQuery Image Rollover effect with example

Example 5: Multiple Rollover effects combined into a single effect using jQuery

Let’s say that we have an input box inside a div. This div has ID “my_div”. When the page loads, we want to hide this input & show it when we rollover the div. Here’s the HTML source code:

<div id="my_div" class="my_class" title="My Div title">This is my div.
<input type="text" name="name" id="name">
</div>

Rollover Div to show input element using jQuery

$(document).ready(function() {

$('#name').hide();

$("#my_div").on('hover', function(e) {
$('#name').show();
});

});

Rollover Div to show hide the input element shown in the above process using jQuery

$("#my_div").mouseleave(function(e) {
$('#name').hide();
});

So the combined code for Rollover Div to show and hide the input element using jQuery is:

$(document).ready(function() {

$('#name').hide();

$("#my_div").on('hover', function(e) {
$('#name').show();
});

$("#my_div").mouseleave(function(e) {
$('#name').hide();
});

});

Now you might ask a question. Why use mouseleave instead of mouseout! Yes, there is a MouseOut event as well that you can use. But in our case, its not useful. Why? Well, for the scenario mentioned, here’s the main difference between mouseleave() and mouseout() in jQuery:

MouseOut():

When a child element of an element receives focus and we are performing an action on this child element, MouseOut() does not support it. That means when the mouse focus shifts from the parent element to the child element, it acts if the parent element has lost focus, even though you have a child element inside this parent element and the you have a mouseover this child element.

MouseLeave();

When we have a child element inside a parent element and we shift the mouse focus from the parent element to the child element, then the focus state of the parent element is considered to be existing unlike MouseOut() that loses focus. In other words, if you have a parent element and you hover the mouse on this, the hover event is triggered and maintained. When you hover over a child element of this parent element, the hover event that was just triggered, is remembered and retained.

So if you do use mouseout in our example instead of mouseleave and try out the code, you will notice that when you hover over the div, the input box will show up. But as soon as you hover over the input box and try to click in it to enter something, the input box disappears. And if you do use mouseleave, you will see that when you hover over “my_div”, it will show the input box and when you hover over the input box, this input box will remain in place and you will be able to click in it & enter something. This input box will remain in view as long as you hover over the parent element or the child element or both. Whereas when you use MouseOut(), the input box will remain in view if and only if the parent div is hovered over at all times.

Hope the above comparison helps you in understanding the difference between mouseleave vs mouseout in jQuery.

That’s it for now!

Do you know of any other ways to make rollover effects in jQuery? Feel free to suggest by commenting below.

Example of Image Roll Over Effect Using jQuery

Let’s look at the demo first:

Before Rollover:

After Rollover:

For the sake of example, let’s assume that you have a main “container” div that contains both the images i.e the image that needs to be shown by default and the roll over image as well.

Example: Here is the complete source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Image Rollover</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.container {
width: 300px;
}
</style>
</head>

<body>

<div class="container">
<img src="1.jpg" width="300" height="300" class="img_default">
<img src="2.jpg" width="300" height="300" class="img_rollover">
</div>

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

$('.img_rollover', $(this)).hide();

$('.container').hover(
function() {
$('.img_default', $(this)).hide();
$('.img_rollover', $(this)).show();
},
function() {
$('.img_default', $(this)).show();
$('.img_rollover', $(this)).hide();
}
);

});
</script>
</body>
</html>

Simple, isn’t it?

Do you know of any other ways to make Image rollover effect using jQuery? Feel free to suggest by commenting below.

P.S:  If you would like to find out how to achieve Image Rollover effect using CSS, then read my article on CSS Image Rollover with Example