使用CSS，我怎樣才能改變表格行的背景顏色取決於我懸停在單元格？

我在我的網頁上有以下代碼。它遍歷一個列表，創建新的細胞，和CSS類分配給基於一個標準一個新的表格單元格（假設類。RAW被分配到一些細胞）：使用CSS，我怎樣才能改變表格行的背景顏色取決於我懸停在單元格？

<tr class="${(i % 2) == 0 ? 'odd' : 'even'}"> 
    <g:each in="${params.classProperties}" status="cnt" var="classProperty"> 
      <td class="${classProperty.name.contains('raw')?'raw':'normal'}">${fieldValue(bean: billTemplateInstance, field: classProperty.name)}</td> 
    </g:each> 
</tr>

如果小區已經分配了。原始類，我設置單元格的背景顏色。現在，我想要改變懸停時一行的整個背景顏色。我嘗試添加以下行到我的CSS文件...

.list td.raw { 
    background: #CCFFBF; 
} 

.list th:hover, .list tr:hover { 
    background: #b2d1ff; 
}

不幸的是，懸停，帶班的單元格的背景顏色。RAW仍然因爲它是在「.LIST td.raw」定義。只有那些尚未分配上懸停一類變色細胞：

enter image description here

感謝所有幫助和建議。 :)

來源

2011-09-14 Carlos Daniel Gadea Omelchenko

你看起來總是變爲藍色單元格的顏色，當其行徘徊，對不對？ – BoltClock

嘗試在'：hover' style'背景上指定：＃b2d1ff！important;' – Samich

@Nightfirecat：不完全 - '.list td.raw'和'.list tr：hover'具有相同的特異性，因此理論上第二條規則應該重寫。我懷疑這與'tr'和'td'元素有關...... – BoltClock

嘗試增加其他選擇的鏈條：

.list th:hover, .list tr:hover {成爲
.list th:hover, .list tr:hover, .list tr:hover td.raw {

來源

2011-09-14 20:04:44 simshaun

謝謝！這個伎倆。 –

雖然'.list th：hover'選擇器可能不是必需的，除非您希望在懸停時更改標題行的顏色。 – BoltClock

沒錯，我還在改變列標題的顏色。 –

使用CSS，我怎樣才能改變表格行的背景顏色取決於我懸停在單元格？

回答

相關問題