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

问题描述：

我使用一小段内嵌HTML代码来更改鼠标悬停时表格中单元格颜色的背景。我只对特定的表格单元格使用它，所以不是所有的单元格都需要这个发生。

I'm using a small piece of inline HTML code to change the background of a cell color in a table on mouse hover. I use this on specific table cells only, so not all cells need this to happen.

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

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

This works nicely, but I would also like to change the font color.

这样默认情况下是一个带有白色文本的黑色单元格

So that it by default is a black cell with white text

但是在鼠标悬停时，bgcolor是白色的，文本是黑色的

But on mouseover the bgcolor is white and the text is black, how should I do that ?

答

如果使用：hover 伪类别 onmouseover 事件

td:hover
{
   background-color:white
}

样式只需使用

td
{
  background-color:black
}

由于您要使用这些样式，而不是所有 td 元素，那么您需要为这些元素指定类，并向该类添加样式，如下所示：

As you want to use these styling not over all the td elements then you need to specify the class to those elements and add styling to that class like this

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

您也可以使用：nth-child selector选择td元素

You can also use :nth-child selector to select the td elements

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

相关推荐