我正在使用 jquery ui 对话框并使用 jquery 添加按钮,如下所示:
$("#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');
}
});
自定义按钮类如下所示:
.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;
}
但是当我将鼠标放在按钮上时,它会稍微向下和向右移动。我使用 Firebug 看到,当我将鼠标移开(更改位置)时,会添加以下 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 的原因。您可以尝试在 CSS 中强制使用 border: none;
属性,如下所示:
.customokbutton {
[...]
border:none !important;
[...]
}
关于Jquery Ui 对话框按钮在鼠标悬停时更改位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16362301/