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

时间:2013-06-04 21:51:41

标签: javascript html

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

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

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

4 个答案:

答案 0 :(得分:1)

您可以使用css:

tr:hover {
    color: White;
}

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

tr {
  background-color: #363636;
}

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

tr {
    background-color: #363636;
}

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

如果您真的想使用onMouseOver,可以这样做:

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

答案 3 :(得分:0)

根据每行中有多列,您可以通过几种不同的方式更新文本样式。我在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';">