переопределить зависание таблицы начальной загрузки для определенных строк - PullRequest
Новая
       11

переопределить зависание таблицы начальной загрузки для определенных строк

0 голосов
/ 03 мая 2019

У меня есть таблица начальной загрузки, где я в определенных строках использую css-лампу вместе с этим кодом, который переопределяет цвет td и цвет текста. У меня вопрос, как я также могу переопределить цвет наведения для класса настольного освещения? 

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

Если я попробую это, это будет работать, но не для строк, которые используют класс табличного освещения, только строки без определенного класса. Так как же поменять курсор только для настольной лампы? 

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

1 Ответ

0 голосов
/ 03 мая 2019

Вы можете использовать парение. Это псевдо класс. Проверьте эту ссылку , вы также можете попрактиковаться и найти другие полезные трюки CSS. 

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