Image hover effect using jQuery

• Saturday, March 15, 2008, 16:53
• javascript, jquery, tips and technique
• 16 comments

.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;
}

<div class="bidimage"> </div>

<script>
$(document).ready(function()
{
  $("div.bidimage").mouseover(function ()
  {
    $(this).addClass("loginimage");
  });

  $("div.bidimage").mouseout(function ()
  {
    $(this).removeClass("loginimage");
  });
});
</script>

• Share
  Delicious Digg Design Float Mixx Reddit StumbleUpon Technorati
• Printable version

Related Posts

» Sleek and Smooth animated menu using jQuery
» Blink and bounce effect on image or object using jquery
» Flashing Alert Message Box using JQuery
» Making accordion menu using jquery

16 Comments on “Image hover effect using jQuery”

• 
  Mukesh wrote on 17 March, 2008, 6:17

  the link to telebid dot com is not working. There is some spelling mistake. Just want to make the correction. The working link is as follows:
  http://www.telebid.com/
• 
  Roshan wrote on 17 March, 2008, 10:33

  thanks for the head up mukesh…i’ve corrected it..
• 
  3vor10 wrote on 31 May, 2008, 14:00

  thanks for the nice tutorial!

  see a pretty live example: (hover and click the dog; “würzen” means “to flavor sth.”)
  http://www.3vor10.com/blog/2008/05/30/ohne-worte/
• 
  John wrote on 29 October, 2008, 19:58

  Thanks for the above. Great way to resolve the li:hover problem with IE6 !
  Usingf the above I can finally change background of my listed items in IE6 as the normal css li:hover doesn’t work.
• 
  Jurney wrote on 22 May, 2009, 15:17

  needed!
• 
  Ankara Web Tasar?m wrote on 7 October, 2009, 11:16

  Böyle bi efekt ar?yordum
• 
  wiyono wrote on 4 April, 2010, 16:22

  Thank for sharing, this cool stuff..
  I would like to try to make using that in my website..

  Thank you
• 
  raju wrote on 9 April, 2010, 12:39

  pretty cool article. Hover effect works great.
• 
  f wrote on 4 May, 2010, 13:03

  nice! fnks!
• 
  davetiye wrote on 5 June, 2010, 22:09

  thank you wey much
• 
  Davetiye wrote on 10 August, 2010, 15:49

  I was looking for how to do an application like that . Your post is easy to understand. I am really glad to see it. Thanks
• 
  wendy wrote on 31 August, 2010, 6:29

  Hello Roshan,

  Its a cool stuff. I’ll try this.
• 
  greetings wrote on 3 February, 2011, 16:14

  kindy share an image border effect when hover

Trackbacks

1. PHP Coding School » Blog Archive » php tips [2008-03-15 19:24:36]
2. Image hover effect using jQuery | jQuery Wisdom
3. pligg.com

Write a Comment