嗨,我有一个 php 填充表,它具有备用行颜色并且工作正常,我现在要做的是在突出显示时更改表行中文本的颜色。
下面的代码显示了表格突出显示,它工作正常,但我无法更改颜色元素。
<tr class="active" bgcolor="#363636" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#363636';" onMouseOver="this.color='#fff';">
嗨,我有一个 php 填充表,它具有备用行颜色并且工作正常,我现在要做的是在突出显示时更改表行中文本的颜色。
下面的代码显示了表格突出显示,它工作正常,但我无法更改颜色元素。
<tr class="active" bgcolor="#363636" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#363636';" onMouseOver="this.color='#fff';">
您可以使用 css:
tr:hover {
color: White;
}
您的所有项目都可以使用 CSS 重做
tr {
background-color: #363636;
}
tr:hover {
background-color: Gold;
color: White;
}
使用this.style.color
代替this.color
,您可以将其全部设置在同一个属性中:
onMouseOver="this.bgColor='gold'; this.style.color='#fff';"
顺便说一句,尽量避免像这样的内联 javascript,这样你就可以将 html/css 和你的 javascript 代码分开。
你有两个相互冲突的onMouseOver
属性。与其这样做,为什么不使用:hover
伪类呢?
tr {
background-color: #363636;
}
tr:hover {
background-color: gold;
color: #ffffff;
}
如果你真的想使用onMouseOver
,你可以这样做:
oneMouseOver="this.bgColor='gold'; this.color='#ffffff';";
根据每行中是否有多个列,您可以通过几种不同的方式更新文本的样式。我在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';">