CODEWITHSUNDEEP
csshtml-tablecolors
Acciaierie Stahlberg
Acciaierie Stahlberg

Reputation: 47

Text and background color into a table

I have a table and I want that the content of a cell and its background changes the color when the mouse hovers on it. So I have tried the following CSS

td {
  background-color: white;
  color: black;
}

td:hover {
  background-color: black;
  color: white;
}
<table width="150px">
  <tr>
    <td><a href="www.testing.com">testing</a></td>
  </tr>
</table>

It seems simple, but it doesn't work. The background change its color, while the text not.

Where is my fault? How can I correct?

Upvotes: 1

Views: 161

Answers (2)

Pete
Pete

Reputation: 58432

Ok, links usually have their own hover style applied so you need to target the links in the table to change their colour:

td {
  background-color: white;
  color: black;
}

td:hover {
  background-color: black;
  color: white;
}

td:hover a {     /* only target links in a td cell that is hovered */
  color: white;
}
<table width="150px">
  <tr>
    <td><a href="www.testing.com">testing</a></td>
  </tr>
</table>

Upvotes: 1

Wimanicesir
Wimanicesir

Reputation: 5122

Your posted css is not incorrect, but maybe it gets overridden by something else. Try adding important to see if this is the case:

Also could you post your html as well?

 td {
     background-color: white !important;
     color: black !important;
     }
  td:hover {
     background-color: black !important;
     color: white !important;
     }
<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Upvotes: 0

Related Questions