更改文本和背景颜色 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> 元素的样式。您的 CSS 仅针对 <td>。

a {
  color: red;
}

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

以 sn-p 为例。

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 2

您需要直接或间接定位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 3

如果您想更改该元素的颜色，则需要针对悬停定位 a 标记而不是 td 标记。请尝试以下操作：

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