Featured Apps


Music Alarm Clock
Simple, stylist and intuitive music alarm clock


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


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

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.
   .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.
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.
    $(function() {
        $('.className').hover(function () {
        }, function () {