对于长时间很合大量数据和浏览表格的用户来说,即使时隔行变色的表格,阅读时间长了仍然会感到疲劳如果数据行能够动态地根据鼠标来变色,就会使页面充满生机,并最大程度地减少用户疲倦。
原理:使用JavaScript读取鼠标的状态,从而改变 tr 行的CSS属性。
首先为 tr 标记添加背景色,即直接调用 tr 标记的伪类别hover来实现动态的变色效果。
.datalist tr:hover,{
Background-color:#c4e4ff;
}
然后在 /table 后添加JavaScript代码。
<script language=”javascript”>
var rows=document.getElementsByTagName(‘tr’);
for (var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){ //鼠标指针在行上面的时候
this.className+=’altrow’;
}
Rows[i].onmouseout=function(){ //鼠标指针离开时
This.className=this.className.replace(‘altrow’,’’);
}
}
</scipt>