我是jQuery的新手所以请耐心等待。我想添加一个单独的按钮类,但不能使悬停和默认值一起工作为新的按钮类。 ui-button-blue是默认设置,使用蓝色渐变背景图像。 ui-button-orange是悬停,使用橙色渐变背景图像。
我可以强制新的默认蓝色按钮正确显示,通过重置ui-button-blue的css属性作为我主题的默认ui-button属性 - 但悬停只应用border属性(橙色)和不是新的橙色背景图片。
我可以通过将ui按钮重置回主题默认值来使ui-button-orange(悬停)工作。
如果ui按钮设置为主题默认值,则此css使按钮橙色悬停:
.ui-state-hover,
.ui-button-orange {
border: 1px solid #ff7f00;
height: 24px;
display: inline-block;
position: relative;
padding: 0px 0px 0px 0px;
margin-right: .1em;
text-decoration: none !important;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: hidden;
*overflow: visible;
background-image: url(images/ but_01_orange.png);
background-repeat:repeat-x;
color:#fff;
}
但我不能让他们一起工作。我已经尝试了一些自定义的.js来覆盖jQuery css和.js,但也无法让它工作。
$(document).ready(function() {
$("button").button();
$("button").hover(
function () {
$(this).removeClass();
$(this).addClass('ui-button-orange ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-blue');//hover
},
function () {
$(this).removeClass();
$(this).addClass('ui-button-blue ui-widget ui-state-default ui-corner-all ui-button-text-only-ui-button-blue');
}
);
});