CSS - ne fonctionne pas en vol stationnaire

Question

J'ai ce code 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; 
    } 

Le dernier (.tab_active:hover a) fonctionne parfaitement dans ma page Web, mais le troisième bloc est pas. Je ne peux pas comprendre pourquoi cela est arrivé. Quelqu'un pourrait-il m'expliquer pourquoi le troisième bloc ne fonctionne pas? Merci!

---

MISE À JOUR 1: Voici le code JavaScript relatif:

//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"); 
}); 

Et aussi le code 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> 

Alors, oui, je suis en train de mettre en place un menu onglet, et c'est une pratique, donc je ne veux pas utiliser la fonction JqueryUI originale. Dose quelqu'un sait que quel est le problème? Merci.

Answer 1

Désolé les gars, ce n'est pas une faute de frappe ou autre chose, je fais juste une erreur que je donne un style de couleur de police au #tab ul li a avant, qui utilise le sélecteur d'id, et qui rendent la fonction toggleClass ne fonctionne pas du tout. Je convertis cette balise d'id en classe puis tout fonctionne bien. merci à tous, c'est mon mal.