In this post, I’ll show you how to make a image hover effect using “div” in jquery.Take a look at a telebid.com if you put the mouse over the bid button it will be changed to login and afterwards it become bid button.
You can click here to view the demo.
Step 1:
First of all, define two classes in css one for “loginimage” and the another for “bidimage” in the “style.css” file
.bidimage
{
background-image:url(images/bid.gif);
background-repeat:no-repeat;
height:28px;
width:62px;
cursor:pointer;
}
.loginimage
{
background-image:url(images/login.gif);
background-repeat:no-repeat;
height:28px;
width:62px;
cursor:pointer;
}
Since image is used as the background in div, the height and width should be defined and declared one pixel more than the background image.
Now, keep in the following division in the “index.html” inside the body tag.
<div class="bidimage"> </div>
Now, define the script for the hover effect using jQuery inside the the “index.html” file.
<script>
$(document).ready(function()
{
$("div.bidimage").mouseover(function ()
{
$(this).addClass("loginimage");
});
$("div.bidimage").mouseout(function ()
{
$(this).removeClass("loginimage");
});
});
</script>
As you can see above in the script, when mouse is over div with the class bidimage the “loginimage” class is added the that div.And, when mouse is out the “loginimage” class is removed from the division.
Click here to download the full source codes
Related posts:
