JQuery와 UI 테마 API를

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

원래의 질문 : 다음 1

도 브라우저 캐시 삭제 후 작동하지 않습니다

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

그러나 작동하지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2011-03-08 oshirowanen

외부 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-08 14:00:13 Mahesh

대단히 고마워요! – oshirowanen

로컬 CSS _always_가 외부 CSS를 덮어 쓰지 않아야합니까? 그래도 나는 스타일 시트의 모든 부분을 가리킨다. – ZeissS

@ZeissS : 당신 말이 맞아요. 실제로 여기에는 추가적인 클래스 계층 구조가 있습니다. #tabs를 사용하면 외부 CSS에서 각 클래스 계층 구조를 재정의하는 데 필요한 가장 구체적인 것이됩니다. .ui-widget-header .ui-state-default {background : 빨강; 색상 : 빨강; 패딩 : 50px; }는 배경을 변경하지만 다른 계층 구조를 따르므로 패딩을 변경하지 않습니다. 그래서 다른 css-static-framework에서 웹 사이트를 개발할 때, 특정 – Mahesh

게스트는 'ui-state-hover'클래스입니까?

출처

2011-03-08 13:53:47 soasme

당신은 그것에 나를 이길. 나는 그것을 고쳤지만 아무런 차이가 없었다. – oshirowanen

우선, 나는 .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-08 13:54:53

다음은 작동하지 않습니다. .ui-state-hover {background-image : none, 배경색 : 빨간색, 색상 : 빨간색, 패딩 : 50px, 여백 : 50px} – oshirowanen

JQuery와 UI 테마 API를

답변

관련 문제