悬停的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特异性

回答

相关问题