Изменение цвета текста и фона CSS / HTML

Question

Я использую этот класс для изменения цвета фона и текста, который прекрасно работает.

#cellType1 {
  width: 10%;
  height: 83px;
  vertical-align: middle;
  background-image: url("Index.html")
}
#cellType1:hover {
color: white;
background-color: #6EBA37;
transition:0.6s;
}

...

<td id="cellType1" class="auto-style21" style="width: 10%">
      <a class="auto-style24" href="ContactUs.html">
      <span class="auto-style37">Contact Us </span></a></td>

auto-style21 работает нормально, но когда я изменяю текст на гиперссылку, я не могу заставить текст изменить цвет.

Я знаю, что это как-то связано со стилем, но я не могу понять, как управлять текстом гиперссылки при наведении ячейки. Даже изменение цвета текста при наведении мыши на текст подойдет.

Я бы предпочел, чтобы текст менялся, когда мышь входит в клетку.

Answer 1

Вам нужно прямо или косвенно нацелить на A, а не на наведение ячейки, чтобы стиль применялся к ссылке.

Если вы хотите, чтобы ссылка изменялась в зависимости от наведения самой ячейки, вы можете использовать следующее:

Изменить этот раздел кода:

#cellType1:hover {
color: white;
background-color: #6EBA37;
transition:0.6s;
}

к этому:

#cellType1:hover {
color: white;
background-color: #6EBA37;
transition:0.6s;
}

#cellType1:hover a {
color: white;
transition:0.6s;
}

Answer 2

Вам нужно стилизовать элемент <a>. Ваш CSS предназначен только для <td>.

a {
  color: red;
}

a:hover {
  color: white;
  background-color: #6EBA37;
}

См. Фрагмент, например.

a {
  color: red;
}

a:hover {
  color: white;
  background-color: #6EBA37;
}

#cellType1 {
  width: 10%;
  height: 83px;
  vertical-align: middle;
  background-image: url("Index.html")
}

#cellType1:hover {
  color: white;
  background-color: #6EBA37;
  transition: 0.6s;
}

<td id="cellType1" class="auto-style21" style="width: 10%">
  <a class="auto-style24" href="ContactUs.html">
    <span class="auto-style37">Contact Us </span></a>
</td>

Answer 3

Вам нужно нацелить тег a вместо тега td для наведения, если вы хотите изменить цвет этого элемента. Попробуйте следующее:

#cellType1:hover a {
    color: #00ff00;
}