jQuery Hover Replace Image

Question

I have a structure like this:

<div class="module">
       <div class="moduleTop"></div>
       <div class="moduleContent"></div>
       <div class="moduleBottom"></div>
    </div>

And each module section has a CSS property of

background: url (imagename.png);

I need to use jquery to change each of the image names of the 3 module parts to imagename-over.png every time .module is hovered, and changed back to original source when the .module div is hovered out.

Any help ?

Thanks.

Answer 1

All modern browsers support :hover, you can do:

.module { background-image:url(/normal.png); } /* if you need this */
.module:hover .innerclass { background-image:url(/over.png/); }

For IE6 ( which doesn't support :hover on anything but anchor elements ) you can do

$('.module').hover(function() {
    $('.innerclass', this).addClass('foo');
}, function() {
    $('.innerclass', this).removeClass('foo');
});

.foo { background-image:url(/over.png); }

You may also want to look at using CSS sprites, basically just stacking states of multiple images into one and shifting the position, which results in less http requests.

Answer 2

Here's an example of just using CSS for this:

http://mooshell.net/Rd9EL/

div.module:hover > div.moduleTop {
  background: red;
}

div.module:hover > div.moduleContent {
  background: yellow;
}

div.module:hover > div.moduleBottom {
  background: green;
}

But this smells like an assignment so you probably must use jquery. If that's the case, add a hover listener to the top div, and then inside there change the classes of the elements and define the classes in your CSS, similar to meder's post (you'll probably want to do that anyway for IE6 weiners.)