1

编辑：1

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

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

原始问题：

使用jquery 的 ui 主题 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>

但这似乎不起作用。我究竟做错了什么？

4

3 回答 3

3

您需要更具体，因为在外部 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/

于 2011-03-08T14:00:13.247 回答
1

我邀请它是“ui-state-hover”类？

于 2011-03-08T13:53:47.637 回答
1

首先，我相信它是.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为选项卡标题执行此操作。

于 2011-03-08T13:54:53.173 回答