Question

我正在使用一小段内联HTML代码来更改鼠标悬停时表格中单元格颜色的背景。我只在特定的表格单元格上使用它，因此并非所有单元格都需要这样做。

<td  bgcolor="#000000" onmouseover="this.bgColor='white'" onmouseout="this.bgColor='black'"  >

这很好用，但我也想改变字体颜色。

因此默认情况下它是带有白色文本的黑色单元格

但是在鼠标悬停时，bgcolor是白色的，文字是黑色的，我应该怎么做？

Answer 1

如果在:hover事件

上使用onmouseover伪类，那就太棒了

td:hover
{
   background-color:white
}

并且对于默认样式，只需使用

td
{
  background-color:black
}

由于您希望使用这些样式而不是所有td元素，因此您需要为这些元素指定类，并将样式添加到该类中

.customTD
{
   background-color:black
}
.customTD:hover
{
  background-color:white;
}

您还可以使用:nth-child选择器选择td元素

Answer 2

要么像其他答案那样使用CSS，要么直接通过onMouseOver和onMouseOut事件更改文本样式颜色：

onmouseover="this.bgColor='white'; this.style.color='black'"

onmouseout="this.bgColor='black'; this.style.color='white'"

Answer 3

你最好使用CSS：

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

如果您只想将这些样式用于特定的元素集，那么您应该为td class {或ID提供，如果它是唯一的元素有这种风格）。

示例：

HTML

<td class="whiteHover"></td>

CSS

.whiteHover{
    /* Same style as above */
}

Answer 4

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