Featured Apps

Collaged

Create Photo Collages
Easily create photo collages to share with friends and family

MyMemes

Create Your Own Memes
Add captions to the most popular meme images or your own photos

Sleepify

Music Alarm Clock
Simple, stylist and intuitive music alarm clock

Change background image on mouse hover with jQuery

16 April 2012

Create your two images!
Make two CSS classes, one pointing at the normal image, and the other class pointing at the hover image.
CSS
   .normalClassName {
        background: url('pathToImages/normal.jpg');
   }

   .hoverClassName {
        background: url('pathToImages/hover.jpg') !important;
   }
Now add you html element into your page, with the class pointing at the normal image.
HTML
   
Content Here
Now it's time for the jQuery that does the switching. Copy and paste the code below, and change the class names to the ones you created.
jQuery
    $(function() {
        $('.className').hover(function () {
            $(this).addClass('hoverClassName');
        }, function () {
            $(this).removeClass('hoverClassName');
        });
    }