Mam tabelę, w której w każdej kolumnie mają inny kolor dla części tekstowej.
To, co lubię robić w wierszu, to podświetlenie tła i przesunięcie całego tekstu do jednego koloru, zamiast ich pojedynczych kolorów podczas normalnego wyświetlania.
Poniżej znajduje się mój kod. Zobaczysz fioletowy, wspaniały, czarny tekst. Następnie, gdy się unosi, tylko czarny tekst zmienia kolor na czerwony.
Teraz próbowałem umieścić hover dla każdej osoby <td>
kolumna, ale to nie zadziałało. Kolor dymku zmieniałby tylko kolor tekstu, gdy mysz znajdowała się dokładnie nad komórką TD, a nie gdy jedna z komórek była zawieszona nad tym wierszem.
.musicListTracks h5 {
padding: 0px;
margin: 0px;
}
.musicListTracks tr:hover {
background-color: #000000;
color: red !important;
cursor: pointer;
}
.musicListTracks tr td:nth-child(1) span {
color: #8470FF;
cursor: pointer;
}
.musicListTracks tr td:nth-child(2) h5 {
color: darkgrey;
}
<table class="musicListTracks" cellpadding=5 cellspacing=0>
<tr>
<td><span>cell 1</span></td>
<td>
<h5>cell 2</h5>
</td>
<td>
<h5>cell 3</h5>
</td>
</tr>
<tr>
<td><span>cell 1b</span></td>
<td>
<h5>cell 2b</h5>
</td>
<td>
<h5>cell 3b</h5>
</td>
</tr>
<tr>
<td><span>cell 1c</span></td>
<td>
<h5>cell 2c</h5>
</td>
<td>
<h5>cell 3c</h5>
</td>
</tr>
</table>
Każda pomoc jest bardzo doceniana.
Odpowiedzi:
1 dla odpowiedzi № 1Masz zdefiniowane kolory dla pierwszych dwóch komórek, ale nie dla trzeciej. To dlatego tylko trzecia komórka ma czerwony kolor na zawisie.
Zamiast tego:
.musicListTracks tr:hover {
background-color: #000000;
color: red !important;
cursor: pointer;
}
Spróbuj tego:
.musicListTracks tr:hover {
background-color: #000000;
cursor: pointer;
}
.musicListTracks tr:hover * {
color: red !important;
}
.musicListTracks h5 {
padding: 0px;
margin: 0px;
}
.musicListTracks tr:hover {
background-color: #000000;
cursor: pointer;
}
.musicListTracks tr:hover * {
color: red !important;
}
.musicListTracks tr td:nth-child(1) span {
color: #8470FF;
cursor: pointer;
}
.musicListTracks tr td:nth-child(2) h5 {
color: darkgrey;
}
<table class="musicListTracks" cellpadding=5 cellspacing=0>
<tr>
<td><span>cell 1</span></td>
<td>
<h5>cell 2</h5>
</td>
<td>
<h5>cell 3</h5>
</td>
</tr>
<tr>
<td><span>cell 1b</span></td>
<td>
<h5>cell 2b</h5>
</td>
<td>
<h5>cell 3b</h5>
</td>
</tr>
<tr>
<td><span>cell 1c</span></td>
<td>
<h5>cell 2c</h5>
</td>
<td>
<h5>cell 3c</h5>
</td>
</tr>
</table>
0 dla odpowiedzi nr 2
Michael ma rację w swojej odpowiedzi, że tynie celuje we wszystkie elementy wewnątrz tds. Jego odpowiedź używa symbolu wieloznacznego, aby kierować dowolny element wewnątrz twojego td. Jeśli tego chcesz, jego odpowiedź byłaby najlepsza. użyj następujących:
.musicListTracks tr:hover {
background-color: #000000;
cursor: pointer;
}
.musicListTracks tr:hover td {
color: red !important;
}
.musicListTracks tr:hover h5 {
color: red !important;
}