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

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

Спасибо.

jquery css

0

Seth Duncan 6 Окт 2009 в 06:27

Мне нужно наведение только модуля (родительский div), чтобы изменить изображения для каждой части модуля, поэтому модуль: наведение изменяет фоновое изображение для: 1) moduleTop 2) moduleContent 3) moduleBottom

–

Seth Duncan

6 Окт 2009 в 06:34

Попробуйте мой обновленный пример. Главное в css - сделать .module:hover .moduleTop

–

meder omuraliev

6 Окт 2009 в 07:28

Answer 1

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

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

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

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

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

Вы также можете взглянуть на использование спрайтов CSS, в основном просто складывая состояния нескольких изображений в одно и меняя положение, что приводит к меньшему количеству HTTP-запросов.

1

meder omuraliev 6 Окт 2009 в 07:28

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

0

Ryan Florence 6 Окт 2009 в 07:24

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

2 ответа

Похожие вопросы

Новые вопросы

jquery