当我将鼠标悬停在表格标题上时如何更改文字的颜色-CSC

时间:2018-06-08 16:31:48

标签: css fonts colors html-table

我创建了表格标题,当我将鼠标悬停在不同的标题上时,我希望文本的颜色更改为白色。我试过了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;
}

2 个答案:

答案 0 :(得分:2)

您可以将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/

我希望这会对你有所帮助。

谢谢

答案 1 :(得分:0)

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

.thclass:hover a {
    color:white;
}