覆盖某些行的引导表悬停答案

【问题标题】：override bootstrap table hover for certain rows覆盖某些行的引导表悬停
【发布时间】：2019-05-03 20:50:52
【问题描述】：

我有一个引导表，我在某些行中使用 table-light css 以及覆盖 td 的颜色和文本颜色的代码。我的问题是如何覆盖 table-light 类的悬停颜色？

.table-light,
.table-light > th,
.table-light > td {
 background-color: #F5F5F5;
 color: #424242;
 }

如果我尝试这样做，它会起作用，但不适用于使用 table-light 类的行，只有未定义类的行。那么如何只更改台灯的悬停呢？

.table-hover> tbody> tr:hover{
 background-color:yellow;
}

这是一个正在使用的 html 表格的示例。

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

【问题讨论】：

你也可以添加示例 HTML 吗？
是的，现在添加了。

标签： css bootstrap-4 hover overriding

【解决方案1】：

您可以使用悬停。这是一个伪类。查看此link，您还可以练习并找到其他有用的 css 技巧。

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

【讨论】：

抱歉，我添加该部分时没有发生任何事情。
确保类名相同。我看到您添加了更多代码，但现在是表格悬停。
是的，类名是相同的（table-light），我把你提供的代码放在我已经拥有的代码之后。我在原始帖子中添加的代码适用于未设置为使用 table-light 类的行。