mouseout set previus返回div的前一個bg圖像

Question

全部。 我有。

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

BG圖像在css中根據父類指定。

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

而且我有菜單。我想要將BG圖像ommouse over，並按照父類在css中爲此頁指定返回圖像。我認爲這可能是真正的使用JQuery。例如，我們打開了3類頁面，並將鼠標移動到1類菜單項上，並在#imagecontainer中看到catefory-1 BG圖像，然後我們將鼠標移出，再次看到3類BG圖像。

Answer 1

我認爲這會做你想要的：

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

這裏你可以看到它在行動：http://jsfiddle.net/Cdzk8/

如果您對您的imagecontainer其他內嵌樣式，它也將刪除這些在mouseleave上。在那種情況下，你會做更多的事情，比如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')); 
});