我正在使用一小段内联 HTML 代码来更改鼠标悬停时表格中单元格颜色的背景。我只在特定的表格单元格上使用它,所以并不是所有的单元格都需要这样做。
<td bgcolor="#000000" onmouseover="this.bgColor='white'" onmouseout="this.bgColor='black'" >
这很好用,但我也想更改字体颜色。
所以默认情况下它是一个带有白色文本的黑色单元格
但是在鼠标悬停时,bgcolor 为白色,文本为黑色,我该怎么做?
如果您在事件上使用:hover
伪类会很棒onmouseover
td:hover
{
background-color:white
}
对于默认样式,只需使用
td
{
background-color:black
}
由于您不想在所有td
元素上使用这些样式,因此您需要为这些元素指定类并像这样向该类添加样式
.customTD
{
background-color:black
}
.customTD:hover
{
background-color:white;
}
您还可以使用:nth-child
选择器来选择 td 元素
要么像其他答案一样使用 CSS,要么直接通过 onMouseOver 和 onMouseOut 事件更改文本样式颜色:
onmouseover="this.bgColor='white'; this.style.color='black'"
onmouseout="this.bgColor='black'; this.style.color='white'"
td:hover{
background-color:red;
color:white;
}