html - 在鼠标悬停时更改 html 中的字体颜色和背景

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一个类（或一个ID，如果它是唯一具有该样式的元素）。

例子 ：

HTML

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

CSS

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

这是 MDN 上关于:hover伪类的参考。

Answer 4

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

我想这就是你要找的。