CSS：懸停爲空單元格：空選擇器

我有一個表格，我希望懸停每個第二個單元格或讓每個單元格更好地說出內容。我想爲空單元格.table_pascals_triangle td:empty懸停效果取消。CSS：懸停爲空單元格：空選擇器

在我的代碼片段和jsfiddle中，它的工作原理與我想要的一樣，但在我的頁面上，我也看到了空單元格上的懸停效果。

.table_pascals_triangle 
 
{empty-cells:hide; 
 
} 
 
.table_pascals_triangle tr.even:hover td:nth-of-type(even){ 
 
    color:black; 
 
    background: #E0E0E0; 
 
} 
 
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd) { 
 
    color:black; 
 
    background: #E0E0E0; 
 
} 
 
.table_pascals_triangle td:empty { 
 
    background: white; 
 
/* this cells shouldn't use the :hover Selector */ 
 
}

<table class="table_pascals_triangle"> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>2</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>3</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">3</td> 
 
    <td></td> 
 
    <td class="tetraeder">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
</table>

來源

2016-10-06 Grischa

嘗試'背景：白色重要;' –

最後選擇簡單了！比上面的特性要低，所以會被忽略。 –

@RobinKnaapen偉大的，它的作品。你能解釋一下，爲什麼它不能在我的網站上工作，但在這裏沒有問題，即使在jsfiddle上運行的css代碼中沒有'：empty'選擇器。 – Grischa

關鍵是要追加:not(:empty)到做徘徊選擇，這樣你就不需要事後一個新的選擇是撤消第一個動作。

問題是一個特殊性：最底層的選擇器不夠強大，無法覆蓋上述選擇。

.table_pascals_triangle 
 
{empty-cells:hide; 
 
} 
 
.table_pascals_triangle tr.even:hover td:nth-of-type(even):not(:empty) { 
 
    color:black; 
 
    background: #E0E0E0; 
 
} 
 
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd):not(:empty) { 
 
    color:black; 
 
    background: #E0E0E0; 
 
}

<table class="table_pascals_triangle"> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>2</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>3</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">3</td> 
 
    <td></td> 
 
    <td class="tetraeder">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
</table>

來源

2016-10-06 06:24:12

您可以使用

background:white!important;

懸停將在統治默認背景除非它是非常重要的。您還cluld告訴繩拉不看空單元

td:hover td:not(:empty)

我認爲第二個選項看起來更好，但是那是給你

來源

2016-10-06 06:24:52

CSS：懸停爲空單元格：空選擇器

回答

相關問題