JQuery Hover Заменить изображение

Question

У меня есть такая структура:

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

И каждый раздел модуля имеет свойство CSS

background: url (imagename.png);

Мне нужно использовать jquery, чтобы изменять каждое из имен изображений 3-х частей модуля на imagename-over.png каждый раз при наведении .module и обратно на исходный источник при наведении. *

Любая помощь?

Спасибо.

Answer 1

Все современные браузеры поддерживают: hover, вы можете сделать:

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

Для IE6 (который не поддерживает: наведение на что-либо, кроме элементов привязки) вы можете сделать

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

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

Вы также можете захотеть использовать спрайты CSS, в основном просто объединяя состояния нескольких изображений в одно и смещая позицию, что приводит к уменьшению количества запросов http.

Answer 2

Вот пример использования CSS для этого:

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

Но это пахнет заданием, поэтому вы, вероятно, должны использовать jquery. Если это так, добавьте hover listener к верхнему div, а затем внутри него измените классы элементов и определите классы в вашем CSS, аналогично посту meder (вы, вероятно, захотите сделать это в любом случае для вайнеров IE6. )