我已经创建了表格标题,当我将鼠标悬停在不同的标题上时,我希望文本的颜色变为白色。我已经尝试过 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;
}
最佳答案
您可以像这样将 CSS 悬停添加到您类(class)中的所有链接。
.thclass a:hover{
红色;
}
<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 中的链接会改变颜色。
这是一个显示此工作的 fiddle 。 https://jsfiddle.net/h3k42Lzq/1/
希望对你有帮助
谢谢
关于css - 当我将鼠标悬停在表头 CSS 上时如何更改文本的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50764932/