jquery ui 主题api答案

【问题标题】：jquery ui theme apijquery ui 主题api
【发布时间】：2011-03-08 22:21:11
【问题描述】：

编辑：1

即使在清除浏览器缓存后，以下操作也不起作用：

.ui-state-hover {background-image:none;background-color:red;color:red;padding:50px;margin:50px;}

原始问题：

使用jquery's ui theme api，我正在尝试改变jquery-ui-tabs的悬停效果：

.ui-state-hover {background-color:red;color:red;padding:50px;}

这是完整的脚本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript" language="javascript"> 
        $(document).ready(function(){
            $( "#tabs" ).tabs();
        });
    </script>

    <style type="text/css">
        .ui-state-hover {background-color:red;color:red;padding:50px;}
    </style>
</head>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus </p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p>
    </div>
</div>
</body>
</html>

但它似乎不起作用。我做错了什么？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs jquery-ui-theme

【解决方案1】：

您需要更具体，因为在外部 css 中带有附加类层次结构的“.ui-state-default”会覆盖您的 css。

把.ui-state-default {background:red;color:red;padding:50px;}改成

#tabs .ui-state-default {background:red;color:red;padding:50px;}

和background:red 而不是background-color:red 因为有背景图片

查看演示http://jsfiddle.net/aX5c9/

【讨论】：

本地 CSS 不应该总是覆盖外部 CSS 吗？我认为这就是层叠样式表的重点。
@ZeissS：你是对的。实际上这里发生的是有额外的类层次结构。如果我们在那里使用#tabs，它将是最具体的，否则我们需要覆盖外部css中的每个类层次结构。说 .ui-widget-header .ui-state-default { background:red;color:red;padding:50px; } 将改变背景，但不会改变填充，因为它遵循另一个层次结构。所以当你从另一个 css-static-framework 开发网站时，最好是具体的

【解决方案2】：

我来宾它是“ui-state-hover”类？

【讨论】：

你打败了我。我纠正了这一点，但没有任何区别。

【解决方案3】：

首先，我相信是.ui-state-hover，而不是ui-widget-hover。其次，看起来原始主题使用的是背景图片，而不是颜色：

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }

因此，如果要更改背景，则需要使用不同的图像，或者在 background-color 之外设置 background-image: none;。

查看这个 JSFiddle：

http://jsfiddle.net/Uce8S/

你需要为标签页头做.ui-widget-header .ui-state-hover。

【讨论】：

以下不起作用：.ui-state-hover {background-image:none;background-color:red;color:red;padding:50px;margin:50px;}