懸停的css特異性

我有css特異性問題。懸停的css特異性

我想<td>風格如果有'沒有條例草案'是不同的顏色，所以我用if語句設置樣式。如果沒有賬單，則樣式爲style = "id=\"no-bills\"";。我得到這個與CSS一起工作。現在，如果用戶懸停在它上面，我希望背景變紅 - 所以我修改了css並添加了#bill-list #no-bills td:hover，其中有td:hover在將鼠標懸停在其上時會添加一些額外的特性。不幸的是，這不起作用（背景保持不變）。

這裏是我的CSS：

#bill-list 
{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 12px; 
    /*margin: 45px;*/ 
    width: 100%; 
    text-align: left; 
    border-collapse: collapse; 
} 
#bill-list th 
{ 
    font-size: 13px; 
    font-weight: normal; 
    padding: 8px; 
    background: #b9c9fe; 
    border-top: 4px solid #aabcfe; 
    border-bottom: 1px solid #fff; 
    color: #039; 
} 
#bill-list td 
{ 
    padding: 8px; 
    background: #e8edff; 
    border-bottom: 1px solid #fff; 
    color: #669; 
    border-top: 1px solid transparent; 
} 
#bill-list tr:hover td 
{ 
    background: #d0dafd; 
    color: #339; 
} 

#bill-list #bill td 
{ 
    background: white; 
} 

#bill-list #no-bills 
{ 
    background: #FFCC99; 
} 
#bill-list #no-bills td:hover 
{ 
    color: orange; 
    background: red /*#FFCC66*/; 
}

這裏是我的代碼（片段）：

<table id="bill-list"> 
<thead> 
    <tr> 
     <% for (int i=0; i<vecHeader.size(); i++) { %> 
      <th><%=vecHeader.get(i) %></th> 
     <% } %> 
    </tr> 
</thead> 

<tbody> 
    <% int uniqueId = 0; 
     for (int i=0; i < vecValue.size(); i++) { 
     boolean hasBills = true; 
     String style = ""; 
     if (vecBills.get(i) == null || vecBills.get(i).size() == 0) { 
      hasBills = false; 
      style = "id=\"no-bills\""; 
     } 
     %> 
     <tr id="bill<%=i%>" onclick="javascript:showBillDetails(<%=i%>)"> 
      <% for (int j=0; j < vecHeader.size(); j++) { 
       prop = (Properties)vecValue.get(i); 
       %> 
       <td <%=style%>><%=prop.getProperty((String)vecHeader.get(j), "&nbsp;") %>&nbsp;</td> 
      <% } %> 
     </tr> 
... 
...

人有什麼想法？

來源

2012-07-25 Jarrett

您應該發佈HTML代碼，而不是生成它的代碼，這裏沒有關係。

第一個問題：你確定在同一頁上不能有2個no-bills id嗎？

然後你的問題：你試圖風格td:hover這是#no-bills的後裔。後者是相同的TD，而不是一個方興未艾的人！你應該風格#bill-list #no-bills:hover，這似乎是一個td被徘徊。

來源

2012-07-25 19:46:08 FelipeAls

做了詭計 - 謝謝！（是的，我應該發佈html）。 – Jarrett 2012-07-25 20:03:30

嘗試

#bill-list #no-bills:hover

，而不是

#bill-list #no-bills td:hover

如果有多個無賬單，你應該使用類以上的ID。

來源

2012-07-25 20:00:02 TaserPain

是的，只是改變他們上課，因爲有多個無帳單。謝謝！ – Jarrett 2012-07-25 20:04:07

懸停的css特異性

回答

相關問題