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>                  

1 Answers

0
Community On

You can use hover. It's a pseudo class. Check out this link you can also practice and find other useful css tricks.

.table-light td:hover {
 background-color: #000000;
 color: #FFFFFF;
 }