JQuery theme builder Проблема с CSS

Question

По какой-то причине атрибут hover не работает. Когда я нажимаю кнопку мыши над кнопкой, она не изменяется на цвет, указанный в 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() с правильным удалением al/добавление соответствующих классов css.

Вы можете прочитать больше на documentation page - более полезный материал находится в нижней части.

Кроме того, в вашем css, который вы опубликовали, :hover с color: применяется только к привязным тэгам - не к кнопкам.

Краткое введение для кнопок JQuery-Ui:
Script:

<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 и переключает классы в/из при необходимости.