Question

我有一个图像，当你点击它时会换出一个较小的图像，就像按下按钮一样，通过这个规则：

div#about.mouseDown {
    background: transparent url("../resources/about_down.png") no-repeat top left;
}

如果有人点击并将鼠标移出div，为了防止它停留，我有这个：

$("#about").mouseleave(function(){
            $(this).css("background", 'transparent url("/resources/about.png") no-repeat top left');
        });

然而，一旦调用它（一旦你将鼠标移入或移出有问题的div），上面的CSS规则就不再适用了。我检查了检查员，它就不再被应用了。

为什么会这样？

Answer 1

问题是，jQuery通过内联代码添加样式，所以你的div会变成这样：

<div id="about" class="mouseDown" style="background: transparent url('../resources/about_down.png') no-repeat top left;"></div>

要让你的css再次运作，你必须使用!important（我不推荐）：

div#about.mouseDown {
    background: transparent url("../resources/about_down.png") no-repeat top left !important;
}

或将css放入js函数中：

$("#about").mousedown(function(){
    this.style.background = "transparent url('/resources/about_down.png') no-repeat top left";
});

<强>更新

另一个好处：CSS not applying properly after jQuery manipulation?

Answer 2

我想你想要

$("#about").mouseleave(function(){
    $(this).css("backgroundUrl", "url('/resources/about.png')");
}).mouseenter(function(){
    $(this).css("backgroundUrl", "url('../resources/about_down.png')");
});

在jQuery操作之后CSS没有正确应用？

2 个答案: