JQuery主題構建器CSS問題

Question

由於某些原因，懸停屬性不起作用。當我將鼠標放在按鈕上時，它不會更改爲CSS中指定的顏色。

這裏是我的相關CSS：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    border: 1px solid #dadada; 
    background: #d7dfff url(images/ui-bg_highlight-soft_75_d7dfff_1x100.png) 50% 50% repeat-x; 
    font-weight: normal; 
    color: #555555; 
} 

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { 
    color: #555555; 
    text-decoration: none; 
} 

.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 #dadada; 
    background: #b3c2ff url(images/ui-bg_highlight-soft_75_b3c2ff_1x100.png) 50% 50% repeat-x; 
    font-weight: normal; 
    color: #212121; 
} 

.ui-state-hover a, .ui-state-hover a:hover { 
    color: #212121; 
    text-decoration: none; 
} 

下面是相關的HTML：

<button class="ui-state-default ui-corner-all ui-state-hover" type="submit" id="barlogin"><p>Login</p></button> 

Answer 1

jQuery的用戶界面，您需要初始化使用您的文檔中的下列準備/的onload功能的按鈕：

$("button").button(); 

這會自動添加$ .hover（）功能和正確的remov al /添加相應的css類。

您可以通過documentation page瞭解更多信息 - 越多有用的東西越接近底部。

此外，在您發佈的CSS中，:hover與color:僅適用於錨定標記 - 而不是按鈕。

的jQuery UI的按鈕快速介紹：
腳本：

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.5.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('button').button(); 
    }); 
</script> 

HTML：

<div>Click here to submit: <button type="submit">Submit</button></div> 

什麼CSS類jQuery將自動爲你添加：

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> 
    <span class="ui-button-text">Button Label</span> 
</button> 

注UI狀態也可以是ui-state-hover，ui-state-active或ui-state-disabled。

它還爲懸停，退出懸停，禁用，JavaScript中的事件以及根據需要切換類中的事件添加了處理程序。