表格鼠标经过时变色

WEB前端 waitig 519℃ 百度已收录 0评论

  对于长时间很合大量数据和浏览表格的用户来说,即使时隔行变色的表格,阅读时间长了仍然会感到疲劳如果数据行能够动态地根据鼠标来变色,就会使页面充满生机,并最大程度地减少用户疲倦。
  
原理:使用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>

本文由【waitig】发表在等英博客
本文固定链接:表格鼠标经过时变色
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)