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>