jQuery UI的对话框按钮改变
我使用jQuery UI的对话,并添加使用jquery这样的按钮,鼠标悬停位置:jQuery UI的对话框按钮改变
$("#151").dialog({
autoOpen: false,
autoResize: true,
buttons: {
"OK": function() {
jQuery(this).dialog('close');
}
}
,
open: function() {
$('.ui-dialog-buttonset').find('button:contains("OK")').focus();
$('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
}
});
和的CustomButton类看起来是这样的:
.customokbutton {
text-indent: -9999em; /* hides the text */
color: transparent; /* also hides text */
background-image: url(images/login-icon.png); /*replaces default image */
background-repeat: no-repeat;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer;
border:none;
height:30px;
outline: none;
}
但是当我将鼠标放在按钮上,它会稍微向右移动。我看到使用萤火虫其下面的CSS类添加当我把鼠标离开(改变位置)
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
和这一个时我悬停按钮:
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
和css是这样的:
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #707070;
/* background: #dadada;*/
font-weight: normal;
color: #212121;
}
我该如何解决?
这在很大程度上取决于在jQuery的CSS的主题,但看似ui-state-hover
有一个1px的边框:
border: 1px solid #fbcb09;
CSS是在这里:http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css
也许这就是正在发生变化按钮1px的权并向下。您可以尝试强制执行border: none;
财产在你的CSS,像这样:
.customokbutton {
[...]
border:none !important;
[...]
}
我试图删除边界,但同样的事情正在发生 – DotnetSparrow 2013-05-03 15:30:01
嗯...你能创建一个快速工作的小提琴吗?我试过了,它似乎工作正常:http://jsfiddle.net/QbuT3/ – Tallmaris 2013-05-03 15:36:15
对不起,我不能生产提琴手,因为我的CSS文件太长,我不知道哪种风格影响这一点。我怎样才能强制按钮在同一个地方? – DotnetSparrow 2013-05-03 15:55:03
给我们使用类似的jsfiddle – Andrew 2013-05-03 15:20:57
你的代码的工作示例又是怎样'UI的状态hover'类中定义的jQuery用户界面? – Tallmaris 2013-05-03 15:21:50
@Tallmaris请检查更新的问题是否为css – DotnetSparrow 2013-05-03 15:29:34