I have a bootstrap table where I in certain rows use table-light css together with this code that override the color of the td and the color of the text. My question is how can I also override the hover color for the table-light class?
.table-light,
.table-light > th,
.table-light > td {
background-color: #F5F5F5;
color: #424242;
}
If I try this it works, but not for rows that use table-light class, only rows with no class defined. So how can I change the hover for the table-light only?
.table-hover> tbody> tr:hover{
background-color:yellow;
}
Here is an example of the html table being used.
<div class="table-responsive">
<table class="table table-hover team-schedule team-schedule--full">
<thead>
<tr>
<th class="team-schedule__date"></th>
<th class="team-schedule__versus"></th>
<th class="team-schedule__status"></th>
<th class="team-schedule__time"></th>
<th class="team-schedule__compet"></th>
<th class="team-schedule__venue"></th>
<th class="team-schedule__tickets"></th>
</tr>
</thead>
<tbody>
<tr data-date="2019-05-27 00:00:00">
<td class="team-schedule__date">2019-05-27</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/ll.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/l.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__status"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__tickets"></td>
</tr>
<tr class="table-light" data-date="2019-05-30 00:00:00">
<td class="team-schedule__date">2019-05-30</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/t.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/n.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__status"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__tickets"></td>
</tr>
</tbody>
</table>
</div>