JQuery 主题生成器 CSS 问题答案

【问题标题】：JQuery theme builder CSS issueJQuery 主题生成器 CSS 问题
【发布时间】：2014-04-10 03:09:10
【问题描述】：

由于某种原因，悬停属性不起作用。当我将鼠标放在按钮上时，它不会更改为我在 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>

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

Jquery-ui 要求您在文档准备/加载功能中使用以下内容初始化按钮：

$("button").button();

这将自动添加 $.hover() 功能，并正确删除/添加相应的 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>

jquery 会自动为你添加哪些 CSS 类：

<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-state 也可以是ui-state-hover、ui-state-active 或ui-state-disabled。

它还为悬停、退出悬停、禁用、javascript 中的事件添加处理程序，并根据需要切换类进/出。

【讨论】：