Примусити дитину успадковувати батьківський колір на hover - html, css, css3, css-selectors

У мене є таблиця, де в кожному стовпчику вони мають різний колір для текстової частини.

Те, що мені подобається робити під час наведення в ряд, - це виділити фоном і весь текст змінити на один колір замість окремих кольорів у звичайному режимі показу.

Нижче мій код. Ви побачите фіолетовий, великий, чорний текст. Потім, коли він завис, лише чорний текст переходить на червоний.

Тепер я спробував поставити наближення для кожної людини <td> , але це не спрацювало. Колір наведення курсора змінить колір тексту лише тоді, коли миша перебуває спеціально над коміркою TD, а не коли будь-яка з комірок, на якій наводиться наведення на цей конкретний рядок.

.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>

Будь-яка допомога дуже вдячна.

Відповіді:

Ви маєте кольори, визначені для перших двох комірок, але не для третьої. Ось чому лише третя клітинка набирає червоний колір на наведення курсора.

Замість цього:

.musicListTracks tr:hover {
background-color: #000000;
color: red !important;
cursor: pointer;
}

Спробуйте це:

.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>

Майкл правильний у своїй відповіді, що тине націлюйте на всі елементи всередині Tds. Його відповідь використовує підстановку для націлювання на будь-який елемент всередині вашого Td. Якщо це саме те, що ви хочете, його відповідь буде найкращим. використовувати наступне:

.musicListTracks tr:hover {
background-color: #000000;
cursor: pointer;
}

.musicListTracks tr:hover td {
color: red !important;
}

.musicListTracks tr:hover h5 {
color: red !important;
}