Changing text and background colour CSS / HTML

Question

I am using this class to change the background and text colors which works great.

#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 works fine but when I change the text to a hyperlink I cannot get the text to change color.

I know this is something to do with the style but I cannot figure out how to control the text of the hyperlink when the cell is moused over. Even changing the color of the text when mousing over the text would do.

I would much prefer the text to change as the mouse enters the cell.

Answer 1

You need to directly or indirectly target the A, rather than the hover of the cell, to make the style apply to the link.

If you want the link to change based on the hover of the cell itself, you can use the following:

Change this section of code:

#cellType1:hover {
color: white;
background-color: #6EBA37;
transition:0.6s;
}

to this:

#cellType1:hover {
color: white;
background-color: #6EBA37;
transition:0.6s;
}

#cellType1:hover a {
color: white;
transition:0.6s;
}

Answer 2

You need to style the <a> element. Your CSS targets the <td> only.

a {
  color: red;
}

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

See snippet for example.

 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 3

You need to target the a tag instead of the td tag for the hover if you would like to change the color of that element. Try the following:

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