Question

您好我有一个填充php的表，它具有交替的行颜色并且工作正常，我现在要做的是在突出显示时更改表格行中文本的颜色。

下面的代码显示了表格突出显示，其工作正常，但我无法更改颜色元素。

 <tr class="active"  bgcolor="#363636" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#363636';" onMouseOver="this.color='#fff';">

Answer 1

您可以使用css：

tr:hover {
    color: White;
}

您可以使用CSS重做所有项目

tr {
  background-color: #363636;
}

tr:hover {
  background-color: Gold;
  color: White;
}

Answer 2

使用this.style.color代替this.color，您可以在同一属性中设置所有内容：

onMouseOver="this.bgColor='gold'; this.style.color='#fff';"

顺便试着避免像这样的内联javascript，所以你将html / css和你的javascript代码分开。

Answer 3

您有两个有冲突的onMouseOver属性。而不是这样做，为什么不使用:hover伪类？

tr {
    background-color: #363636;
}

tr:hover {
  background-color: gold;
  color: #ffffff;
}

如果您真的想使用onMouseOver，可以这样做：

oneMouseOver="this.bgColor='gold'; this.color='#ffffff';";

Answer 4

根据每行中有多列，您可以通过几种不同的方式更新文本样式。我在JSFiddle中测试了这两个，但它们都有效。

如果您只希望在特定单元格被鼠标悬停时更新颜色：

 <tr class="active"  bgcolor="#363636" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#363636';" >
      <td onMouseOver="this.style.color='#fff';" onMouseOut="this.style.color='#000';">
        hey
      </td>
    </tr>

如果您希望在行中的任何单元格被鼠标悬停时更新颜色：

<tr class="active"  bgcolor="#363636" 
   onMouseOver="this.bgColor='gold';this.style.color='#fff';" 
   onMouseOut="this.bgColor='#363636';this.style.color='#000';">

表格翻转突出显示更改文本颜色

4 个答案: