jQuery UI Button忽略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开发人员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（）多次将它添加到元素的样式会使事情变得混乱 - 只需在活动时检查按钮的样式属性，例如：萤火。很可能是你在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');
});