I have a table where in each column they have a different color for the text part.
What I like to do on a row hovering is to highlight with the background and have all the text shift to one color instead of their individual colors on normal showing.
Below is my code. You will see purple, great, black text. Then when it hovers, only the black text shifts to red.
Now I have tried putting a hover for each individual <td> column but that did not work. The hover color would only change text color when the mouse was specifically over the TD cell not when any of the cells where being hovered over for that particular row.
.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>Any help is greatly appreciated.