Question

所有。我有。

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

BG图像根据父类在css中为ich页面指定。

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

我有菜单。我想要将BG图像ommouse超过，并根据父类在鼠标上返回在css中为此页面指定的返回图像。我认为使用JQuery可能是真的。例如，我们打开了第3类页面并在第1类菜单项上移动鼠标，在#imagecontainer中查看catefory-1 BG图像，然后我们将鼠标移出再看第3类BG图像。

Answer 1

将当前背景图像存储为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'));
});

Answer 2

我想你会想要这样：

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

您可以在此处看到它：http://jsfiddle.net/Cdzk8/

如果您的imagecontainer上有其他内联样式，它也会删除mouseleave上的内联样式。在这种情况下，你会做更像mblase75推荐的事情。

mouseout set previus返回div的前一个bg图像

2 个答案: