jQuery UI的對話框按鈕改變

Question

我使用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'); 
       } 
      }); 

和的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; 
} 

我該如何解決？

Answer 1

這在很大程度上取決於在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; 
    [...] 
}