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

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?