CODEWITHSUNDEEP
jquerycss
Seth Duncan
Seth Duncan

Reputation: 1255

jQuery Hover Replace Image

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.

Upvotes: 0

Views: 798

Answers (2)

meder omuraliev
meder omuraliev

Reputation: 186552

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.

Upvotes: 1

Ryan Florence
Ryan Florence

Reputation: 13483

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.)

Upvotes: 0

Related Questions