Search code examples
htmlcsshtml-tablemouseover

Changing the entire table on mouse over

I have a very simple table for testing

<table>
<th>Header</th>
<tr><td>Somecontent</td></tr>
</table>

Now I surely can do

<th  onMouseOver="this.style.backgroundColor='#123456'" OnMouseOut="this.style.backgroundColor='#234567'" >Header</th>

but this would only only highlight the header. I cannot add this code to the as it doesnt work. Any Idea how I can highlight the entire table on mouseover?

Solution

  • @Sebastian Heyn Please check following code. I hope you were expecting the same.

    table:hover {
    background-color: #FFEB3B;
    color: red;
}
    <table>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr><td>Somecontent</td>
<td>Somecontent</td>
</tr>
</table>