jQuery操作后CSS无法正确应用？

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之后再移出该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在jQuery操作后不能正确应用？

Answer 2

我想你要

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