CSS는 호버

Question

내가 이러한 CSS 코드가 작동하지 않습니다

.tabs_inactive { 
     border: 1px solid #cccccc; 
     border-top-left-radius: 8px; 
     border-top-right-radius: 8px; 
     background-color: #eeeeee; 
     border-bottom: #cccccc; 
    } 

    .tabs_inactive:hover { 
     background-color: #ff8000; 
     border-color: #ff8000; 
     cursor: pointer; 
    } 

    /*this does not work*/ 
    .tabs_inactive:hover a { 
     color: #ffffff; 
    } 

    .tabs_active { 
     background-color: #ffffff; 
     border-bottom: 2px solid #ffffff; 
    } 

    .tabs_active:hover{ 
     background-color: #ffffff; 
     border: 1px solid #cccccc; 
     border-bottom: 2px solid #ffffff; 
     cursor: default; 
    } 

    .tabs_active:hover a { 
     cursor: default; 
    } 

마지막 하나 (.tab_active:hover a가) 내 웹 페이지에서 완벽하게 작동하고 있지만, 세 번째 블록은 없습니다. 왜 이런 일이 일어 났는지 나는 알 수 없다. 누군가 제 3의 블록이 작동하지 않는 이유를 설명 할 수 있습니까? 감사합니다.

---

UPDATE 1 : 또한

//add class "tabs_inactive" to the original tabs option. 
$("#tabs ul li").addClass("tabs_inactive"); 

//default: set the first tab as the active one. 
$("#tabs ul li").first().toggleClass("tabs_active"); 

//to make sure the style sheet will be changed when click on the inside <a> tag 
$("#tabs ul li a").live("click", function() { 
    //close other tabs 
    $(this).parents("ul").children("li").each(function(){ 
     if($(this).hasClass("tabs_active")){ 
      $(this).removeClass("tabs_active"); 
     } 
    }); 
    $(this).parent().toggleClass("tabs_active"); 
    return false; 
}); 
//change the class to "tabs_active" when the tab is clicked 
$("#tabs ul li").live("click", function() { 
    //close other tab 
    $(this).parent().children("li").each(function(){ 
     if($(this).hasClass("tabs_active")){ 
      $(this).removeClass("tabs_active"); 
     } 
    }); 
    $(this).toggleClass("tabs_active"); 
}); 

그리고 HTML 코드 : 다음 가 상대적으로 자바 스크립트 코드

그래서

 <div id="tabs"> 
      <ul> 
       <li><a href="#homepage">HOME</a> </li> 
       <li><a href="#option1">option1</a> </li> 
      </ul> 
      <div id="homepage"> 
       <p> 
        HOME: 
        Here is the home page 
       </p> 
      </div> 
      <div id="option1"> 
       <p> 
        Option1: 
        Here is the tag page 1 
       </p> 
      </div> 
     </div> 

, 그래, 내가 탭 메뉴를 구현하기 위해 노력하고, 이것은 연습이므로 원래 JqueryUI 함수를 사용하고 싶지는 않습니다. 누군가가 그 문제가 무엇인지 알았습니까? 감사합니다.

Answer 1

죄송합니다, 오타 나 다른 것이 아니며, 이전에 #tab ul li a에 글꼴 선택기 스타일을 지정합니다. 이는 id 선택기를 사용하고 있습니다.이 기능을 사용하면 toggleClass이 작동하지 않습니다. 조금도. 그 태그를 ID에서 클래스로 변환하면 모든 것이 잘 작동합니다. 고마워, 그건 내 잘못이야.