3

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

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

这很好用,但我也想更改字体颜色。

所以默认情况下它是一个带有白色文本的黑色单元格

但是在鼠标悬停时,bgcolor 为白色,文本为黑色,我该怎么做?

4

4 回答 4

14

如果您在事件上使用:hover伪类会很棒onmouseover

td:hover
{
   background-color:white
}

对于默认样式,只需使用

td
{
  background-color:black
}

由于您不想在所有td元素上使用这些样式,因此您需要为这些元素指定类并像这样向该类添加样式

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

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

于 2013-11-05T16:54:33.233 回答
10

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

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

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

于 2013-11-05T17:00:50.073 回答
2

您最好为此使用 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伪类的参考。

于 2013-11-05T16:55:27.510 回答
0
td:hover{ 
background-color:red;
color:white;
}

我想这就是你要找的。

于 2013-11-05T17:07:35.327 回答