jquery - 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），上述 CSS 规则将不再适用。我检查了检查员，它根本不再被应用。

为什么会这样？

Answer 1

问题是，jQuery 通过inline -code 添加样式，因此您的 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";
});

更新

另一个好点：在 jQuery 操作之后 CSS 没有正确应用？

Answer 2

我想你想要

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