CODEWITHSUNDEEP
cssfontscolorshtml-table
Chenius
Chenius

Reputation: 131

how do I change the color of text when I hover over a table header-CSS

I have created table headers and I want the color of the text to change to white when I hover over the different headers. I have tried color:white, but it doesn't seem to work. I have tried to look on the internet but I can't seem to find an answer. I would like to fix this with CSS because I am still learning Javascript and 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;
}

Upvotes: 0

Views: 1986

Answers (2)

James
James

Reputation: 11

Mo Star is correct in that a tags do not inherit the .thclass:hover class. I would change to this however, since you probably want the text to change while hovering over the entire hr tag instead of just the a tag.

.thclass:hover a {
    color:white;
}

Upvotes: 0

Mo Star
Mo Star

Reputation: 231

You could add CSS hover to all links in your class like so.

.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>

This way only the links within your class .thClass will change colour.

Here is a fiddle showing this working. https://jsfiddle.net/h3k42Lzq/1/

I hope this helps you.

Thanks

Upvotes: 2

Related Questions