在鼠标上更改整个表格

Question

我有一个非常简单的测试表

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

现在我肯定可以做到

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

但这只会突出显示标题。我无法添加此代码，因为它不起作用。任何想法如何在鼠标悬停时突出显示整个表格？

Answer 1

@Sebastian Heyn请检查以下代码。我希望你期待同样的事情。

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>

Answer 2

为什么使用内联JS和CSS的组合？把这些东西放在样式表中......

table:hover {
    background: red; 
}

Answer 3

尝试我的代码。它可以帮助你。

.sample {
border:1px;
}
.sample th{
background-color:red;
}
.sample th:hover{
background-color:blue;
}

<table class="sample" border=1>
<tr><th>Header</th></tr>
<tr><td>Somecontent</td></tr>
</table>

Answer 4

我不是专家，但也许你应该创建表id并使用一些jquery函数。