CSS懸停與特定數據單元的第n個孩子不起作用

我已經看到類似這個問題的另一個問題，它展示瞭如何將懸停添加到具有第n個孩子的選擇器。它似乎工作，但不是當我試圖只針對特定單元格時（在後面的例子中，類「狀態」應該是不同的顏色，並有懸停效果）。CSS懸停與特定數據單元的第n個孩子不起作用

tr { 
 
    color: white; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: red; 
 
} 
 
tr:nth-child(odd) { 
 
    background-color: blue; 
 
} 
 

 
.status tr:nth-child(even) { 
 
    background-color: yellow; 
 
} 
 
.status tr:hover:nth-child(even){ 
 
    background-color: white; 
 
} 
 
.status tr:nth-child(odd) { 
 
    background-color: green; 
 
} 
 
.status tr:hover:nth-child(odd){ 
 
    background-color: orange; 
 
}

<table border="1"> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>big</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>yellow</td> 
 
    <td>medium</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>small</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
</table> 
 

 
<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

「可用」細胞應該是黃色或白色，而當徘徊綠色或橙色。其他細胞需要是紅色或藍色。

來源

2017-06-18 Marked as Duplicate

https://codepen.io/anon/pen/yXgREG

tr:nth-child(odd) .status { 
    background-color: yellow; 
} 

tr:nth-child(odd) .status:hover { 
    background-color: green; 
} 

tr:nth-child(even) .status { 
    background-color: white; 
} 

tr:nth-child(even) .status:hover { 
    background-color: orange; 
} 

tr:nth-child(odd) .status { 
    background-color: yellow; 
} 

tr:nth-child(odd) .status:hover { 
    background-color: green; 
} 

tr:nth-child(even) .status { 
    background-color: white; 
} 

tr:nth-child(even) .status:hover { 
    background-color: orange; 
} 

tr:nth-child(even) { 
    background-color: red; 
} 

tr:nth-child(odd) { 
    background-color: blue; 
}

來源

2017-06-18 09:06:35 gauravmuk

-1

你犯了一個錯誤。你必須使用這個

tr:nth-child(even) .status { 
    background-color: yellow; 
} 
tr:nth-child(even):hover .status{ 
    background-color: white; 
} 
tr:nth-child(odd) .status { 
    background-color: green; 
} 
tr:nth-child(odd):hover .status { 
    background-color: orange; 
}

使用這個，你會得到一個解決方案。

來源

2017-06-18 09:02:06

，不能正常工作。 –

現在正在工作。請立即檢查。 –

見下文。我將.status移到了定義的末尾。

tr { 
 
    color: white; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: red; 
 
} 
 
tr:nth-child(odd) { 
 
    background-color: blue; 
 
} 
 

 
tr:nth-child(even) .status { 
 
    background-color: yellow; 
 
} 
 
tr:hover:nth-child(even) .status { 
 
    background-color: green; 
 
} 
 
tr:nth-child(odd) .status { 
 
    background-color: white; 
 
    color: black; 
 
} 
 
tr:hover:nth-child(odd) .status { 
 
    background-color: orange; 
 
}

<table border="1"> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>big</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>yellow</td> 
 
    <td>medium</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>small</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
</table> 
 

 
<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

來源

2017-06-18 09:03:40 Gerard

當您將鼠標懸停在該行的任何其他單元格上時，可用的單元格顏色也會發生變化。 –

如前面的答覆中提到，您需要懸停，因爲你需要定義你想先徘徊元素的第n個孩子選擇去後。你的.status類也應該在選擇器的末尾，因爲它是tr的孩子。

tr { 
 
    color: white; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: red; 
 
} 
 
tr:nth-child(odd) { 
 
    background-color: blue; 
 
} 
 

 
tr:nth-child(even) .status { 
 
    background-color: yellow; 
 
} 
 
tr:nth-child(even):hover .status { 
 
    background-color: white; 
 
} 
 
tr:nth-child(odd) .status { 
 
    background-color: green; 
 
} 
 
tr:nth-child(odd):hover .status { 
 
    background-color: orange; 
 
}

<table border="1"> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>big</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>yellow</td> 
 
    <td>medium</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>small</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
</table>

來源

2017-06-18 09:06:30 WizardCoder

你犯了一個錯誤。你必須使用這個

tr:nth-child(even) .status { 
    background-color: yellow; 
} 
tr:nth-child(even):hover .status{ 
    background-color: white; 
} 
tr:nth-child(odd) .status { 
    background-color: green; 
} 
tr:nth-child(odd):hover .status { 
    background-color: orange; 
}

使用這個，你會得到一個解決方案。

tr { 
 
    color: white; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: red; 
 
} 
 
tr:nth-child(odd) { 
 
    background-color: blue; 
 
} 
 

 
tr:nth-child(even) .status { 
 
    background-color: yellow; 
 
} 
 
tr:nth-child(even):hover .status{ 
 
    background-color: white; 
 
} 
 
tr:nth-child(odd) .status { 
 
    background-color: green; 
 
} 
 
tr:nth-child(odd):hover .status { 
 
    background-color: orange; 
 
}

<table border="1"> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>big</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>yellow</td> 
 
    <td>medium</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
<tr> 
 
    <td>blue</td> 
 
    <td>small</td> 
 
    <td class="status">available</td> 
 
</tr> 
 
</table> 
 

 
<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

來源

2017-06-18 09:07:01

CSS懸停與特定數據單元的第n個孩子不起作用

回答

相關問題