JQuery theme builder CSS issue

Question

For some reason the hover attribute is not working. When i put my mouse over the button, it doesn't change to the color I specified in the CSS.

Here's my relevant 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; }

Here's the relevant HTML:

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

Answer 1

Jquery-ui requires that you initialize the buttons using the following in your document ready/onload function:

$("button").button();

This will automatically add the $.hover() functionality with the correct removal/addition of the respective css classes.

You can read more at the documentation page - the more useful stuff is towards the bottom.

Also, in your css you posted, the :hover with the color: is only applied to anchor tags - not buttons.

Quick intro for jquery-ui buttons:
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"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function(){
       $('button').button();
   });
</script>

HTML:

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

What CSS classes jquery will add automatically for you:

<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>

Note that the ui-state can also be ui-state-hover, ui-state-active or ui-state-disabled.

It also adds handlers for the hover, exit hover, disabled, events in javascript and switches classes in/out as needed.