Mam problem w :hover.
Chcę zrobić ostatni tr tego tbody również zmienić kolor, gdy jest tbody jest zawisły. Problem jest ostatni tr ma swoją klasę.
Oto struktura mojego kodu:
.cust-table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.cust-table td {
border: 1px solid black;
padding: 10px;
}
.cust-table tbody:nth-child(even){
background-color: white;
}
.cust-table tbody:nth-child(odd){
background-color: green;
}
.cust-color {
background-color: blue;
}
.cust-table tbody:hover {
background-color: yellow;
}<table class="cust-table">
<tbody>
<tr>
<td rowspan="2">A</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">B</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">C</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
</table>Próbowałem dodać cust-color:hover ale zgodnie z oczekiwaniami działa tylko wtedy, gdy <tr> z cust-color jest zawisły.
Odpowiedzi:
3 dla odpowiedzi № 1Użyj tej reguły, aby ustawić niestandardowy kolor tylko wtedy, gdy tbody nie jest zawieszony:
tbody:not(:hover) .cust-color {
background-color: blue;
}
.cust-table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.cust-table td {
border: 1px solid black;
padding: 10px;
}
.cust-table tbody:nth-child(even){
background-color: white;
}
.cust-table tbody:nth-child(odd){
background-color: green;
}
tbody:not(:hover) .cust-color {
background-color: blue;
}
.cust-table tbody:hover {
background-color: yellow;
}<table class="cust-table">
<tbody>
<tr>
<td rowspan="2">A</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">B</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">C</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
</table>1 dla odpowiedzi nr 2
Odpowiedź Ori Drori jest prawdopodobnie najlepsza, ale oto alternatywne rozwiązanie:
.cust-table tbody:hover, .cust-table tbody:hover tr.cust-color {
background-color: yellow;
}
Zastępuje kolor tr, gdy jego rodzic nadrzędny jest zawieszony.
1 dla odpowiedzi nr 3
Dodaj regułę dla tego konkretnego tr:
.cust-table tbody:hover,
.cust-table tbody:hover .cust-color{
background-color: yellow;
}