Question

编辑：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>

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

Answer 1

你需要更具体，因为“.ui-state-default”在外部css中有额外的类层次结构会覆盖你的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/

Answer 2

我拜访了'ui-state-hover'课程？

Answer 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-image: none;之外另外设置background-color。

看看这个JSFiddle：

http://jsfiddle.net/Uce8S/

您需要为标题标题执行.ui-widget-header .ui-state-hover。

jquery ui主题api

3 个答案: