将鼠标悬停在表格标题-CSS上时如何更改文本的颜色答案

【问题标题】：how do I change the color of text when I hover over a table header-CSS将鼠标悬停在表格标题-CSS上时如何更改文本的颜色
【发布时间】：2018-11-18 18:26:01
【问题描述】：

我已经创建了表格标题，当我将鼠标悬停在不同的标题上时，我希望文本的颜色变为白色。我试过color:white，但它似乎不起作用。我试图在互联网上查找，但似乎找不到答案。我想用 CSS 解决这个问题，因为我还在学习 Javascript 和 jQuery。

HTML：

</div>
<nav>
  <table>
    <tr>
      <th class="thclass"><a href="google.com">Home</a></th>
      <th class="thclass"><a href="#">About</a></th>
      <th class="thclass"><a href="#">Shop</a></th>
      <th class="thclass"><a href="#">Blog</a></th>
      <th class="thclass"><a href="#">Gallery</a></th>
      <th class="thclass"><a href="#">Pages</a></th>
      <th class="thclass"><a href="#">Contact</a></th>
    </tr>
  </table>
</nav>

CSS：

body {
  margin: 0px;
}
#header {
  display: inline-block;
  float: left;
  margin-left: 70px;
  font-family: Castellar;
  font-size: 40px;
}
table {
  display: inline-block;
  /*margin-top: 10px;*/
  position: relative;
  margin-left: 200px;
  border-collapse: separate;
  /*border-spacing: 20px;*/
}
table a {
  text-decoration: none;
  font-size: 17px;
  color: #90bde8;
  padding-right: 7px;
  font-family: Century Gothic;
}
.thclass {
  height: 100px;
  width: 120px;
  background-color: white;
}
.thclass:hover {
  background-color: #befcf1;
  color: white;
}

【问题讨论】：

<a> 元素不会自动继承它们的color，但如果您调整选择器以指向<a> 元素，例如：.thclass:hover a, .thclass a:hover { color: white; }，它应该可以工作。
我同意大卫的观点，我用类似的东西创造了一个小提琴：jsfiddle.net/pg5nxo2L
只需为标签a添加规则并分配color: white;的规则

标签： css fonts colors html-table

【解决方案1】：

您可以像这样将 CSS 悬停添加到您班级中的所有链接。

.thclass a:hover{ color:red; }

<table>
    <tr>
      <th class="thclass"><a href="google.com">Home</a></th>
      <th class="noHover"><a href="#">About</a></th>
      <th class="thclass"><a href="#">Shop</a></th>

  <th class="thclass"><a href="#">Blog</a></th>
  <th class="thclass"> <a href="#">Gallery</a></th>
  <th class="thclass"><a href="#">Pages</a></th>
  <th class="thclass"><a href="#">Contact</a></th></tr>  
</table>

这样只有类 .thClass 中的链接会改变颜色。

这是一个显示此工作的小提琴。 https://jsfiddle.net/h3k42Lzq/1/

希望对你有帮助。

谢谢

【讨论】：

【解决方案2】：

Mo Star 是正确的，因为标签不继承 .thclass:hover 类。但是，我会更改为这个，因为您可能希望文本在将鼠标悬停在整个 hr 标签上而不是仅 a 标签上时更改。

.thclass:hover a {
    color:white;
}

【讨论】：