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 зависает и возвращается обратно к исходному источнику, когда разворачивается .module div.

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

Спасибо.

Answer 1

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

.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. Если это так, добавьте прослушиватель наведения в верхний div, а затем внутри там измените классы элементов и определите классы в вашем CSS, похожие на сообщение медитера (вы, вероятно, захотите сделать это в любом случае для IE6 weiners.)