CSS - 懸停不工作

我有這些CSS代碼：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）在我的網頁可以正常使用，但第三塊是沒有的。我無法弄清楚爲什麼會發生這種情況。有人可以解釋爲什麼第三塊不起作用嗎？謝謝！

更新1：這裏是相對的JavaScript代碼：

//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函數。有人知道有什麼問題？謝謝。

來源

2012-11-15 Anar

沒有看到你正在標記的HTML，真的很難確定可能會發生什麼，或者可能不會發生，但是你可以嘗試給不觸發懸停事件的元素添加「display：block」。 – FireCrakcer37

你有HTML或鏈接？ –

很難說沒有更多的信息。您可能能夠！重要的覆蓋它。我猜想另一個規則是重寫它，你可能沒有給選擇器足夠高的優先級。 –

對不起，這不是一個錯字或別的東西，我只是犯了一個錯誤，我給字體顏色風格的#tab ul li a之前，這是使用ID選擇器，並使功能toggleClass不起作用在所有。我將該標籤從id轉換爲class，然後每件事情都可以正常工作。謝謝大家，這是我的不好。

來源

2012-11-15 02:02:55 Anar

anarchie vaincra！ –

CSS - 懸停不工作

回答

相關問題