mouseout set previus возвращает предыдущее изображение div

Question

все. У меня есть.

<div id="imagecontainer" class="header-image-container">&nbsp;</div>

BG изображение указывается в css для ich страницы в соответствии с родительским классом.

.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}

И у меня есть меню. Я хочу изменить изображение BG на ommouse over, и при наведении мыши вернуть изображение, указанное в css для этой страницы в соответствии с родительским классом. Я думаю, что это может быть реально с использованием JQuery. Например, мы открыли страницу категории 3 и переместили мышь на пункт меню категории 1 и увидели изображение BG catefory-1 в #imagecontainer, а затем переместили мышь, чтобы увидеть снова изображение BG категории 3.

Answer 1

Я думаю, что вам этого захочется:

$('#menu').mouseenter(function() {
    $('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
    $('#imagecontainer').removeAttr('style');
})

Вы можете увидеть это в действии здесь: http://jsfiddle.net/Cdzk8/

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

Answer 2

Сохраните текущее фоновое изображение как data перед его заменой и извлеките его оттуда, если вы хотите заменить его обратно.

$('#imagecontainer').mouseover(function() {
    $(this).data('bgimg') = $(this).css('background-image');
    $(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
    $(this).css('background-image', $(this).data('bgimg'));
});