Цвет текста и фона в таблицу - PullRequest
Новая
       11

Цвет текста и фона в таблицу

0 голосов
/ 22 ноября 2018

У меня есть таблица, и я хочу, чтобы содержимое ячейки и ее фона меняло цвет при наведении на нее курсора мыши.Поэтому я попробовал следующий CSS 

td {
  background-color: white;
  color: black;
}

td:hover {
  background-color: black;
  color: white;
}
<table width="150px">
  <tr>
    <td><a href="www.testing.com">testing</a></td>
  </tr>
</table>

Кажется простым, но не работает.Фон меняет свой цвет, а текст нет.

Где моя вина?Как я могу исправить?

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Хорошо, для ссылок обычно применяется собственный стиль наведения, поэтому вам нужно настроить таргетинг на ссылки в таблице, чтобы изменить их цвет: 

td {
  background-color: white;
  color: black;
}

td:hover {
  background-color: black;
  color: white;
}

td:hover a {     /* only target links in a td cell that is hovered */
  color: white;
}
<table width="150px">
  <tr>
    <td><a href="www.testing.com">testing</a></td>
  </tr>
</table>
0 голосов
/ 22 ноября 2018

Ваш отправленный css не является неправильным, но, возможно, он будет переопределен чем-то другим.Попробуйте добавить важный, чтобы увидеть, если это так:

Также не могли бы вы также опубликовать свой HTML? 

 td {
     background-color: white !important;
     color: black !important;
     }
  td:hover {
     background-color: black !important;
     color: white !important;
     }
<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
...