在鼠标悬停时更改整个 table

Question

我有一个非常简单的table用于测试

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

现在我一定可以了

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

但这只会突出显示 header。我无法将此代码添加到，因为它不起作用。知道如何在鼠标悬停时突出显示整个 table 吗？

Answer 1

试试我的 code.hope 它可能对你有帮助。

.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 2

@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 3

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

table:hover {
    background: red; 
}

Answer 4

我不是专家，但也许你应该创建 table id 并使用一些 jquery 功能。

Changing the entire table on mouse over