css - jQuery UI 按钮忽略 Firefox 中的样式

Question

我有一个 jQuery UI Button我正在尝试使用 CSS 设置样式。基本上我想要的只是深绿色背景和浅绿色悬停颜色。我注意到无论出于何种原因，在我的 CSS 文件中指定所需的样式都不起作用，因此我添加了一些代码以在创建按钮时以编程方式应用它们:

//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();

//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");

//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");

//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
    //mouse-over handler
    $(this).css("background-color", "green !important");
}, function() {
    //mouse-out handler
    $(this).css("background-color", "#006600 !important");
});

这在 Chrome、IE 和 Safari 中运行良好，但出于某种原因，Firefox 继续显示默认的灰色按钮样式(未报告脚本错误)。有趣的是，如果我打开 web-developer CSS 编辑器，按钮会立即获得正确的样式。在我意识到样式只有以编程方式应用时才会采用之前，我的 CSS 中有以下内容:

.greenButton {
    background-color: #006600 ! important;
}
.greenButton:hover {
    background-color: green ! important;
}

无论如何，我在 Firefox 中默认看到的是这样的:

...当它应该看起来像这样(如在任何其他浏览器中看到的那样)时:

有什么想法吗？

Answer 1

在您的 CSS 中，您只设置了 background-color 属性，而 jQuery UI 按钮是用背景图像构建的，它覆盖了颜色。你通过 JS 设置 'background:none' 是正确的，但是通过 css() 多次将它添加到元素的样式中会使事情变得有点困惑 - 只需在激活时检查按钮的样式属性，例如 Firebug 。很可能是您在 FireFox 中遇到了一个小错误。这个对我有用。无论如何，这里是working jsFiddle

CSS:

.greenButton {
  background: #006600 none ! important;
}
.greenButtonHover {
  background: #009900 none ! important;
}

HTML:

<button>Should be green on hover</button>

JS:

$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
    $(this).addClass('greenButtonHover');
}, function() {       
    $(this).removeClass('greenButtonHover');
});