JQuery UI Тема API - PullRequest
Новая
       31

JQuery UI Тема API

1 голос
/ 08 марта 2011

РЕДАКТИРОВАТЬ: 1

Не работает даже после очистки кэша браузера: 

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

ОРИГИНАЛЬНЫЙ ВОПРОС:

Используя пользовательский интерфейс jquery api , я пытаюсь изменить эффект наведения на вкладках jquery-ui: 

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

Но, похоже, не работает.Что я делаю не так?

Ответы [ 3 ]

3 голосов
/ 08 марта 2011

вам нужно быть более конкретным, потому что ".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/

1 голос
/ 08 марта 2011

Во-первых, я считаю, что это .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 для заголовков табуляции.

1 голос
/ 08 марта 2011

Я гость, это класс 'ui-state-hover'?

...