本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码,供大家参考,具体内容如下
表格表头为蓝色,表主体为白色,当鼠标放到表的非表头行时,这一行颜色变为黄色,鼠标离开时黄色消失。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标经过表格变色</title> <style> table { margin: 200px auto; font-size: 12px; border-collapse: collapse; width: 500px; height: 50px; } table thead tr { font-size: 14px; background-color: skyblue; } td { border: 1px solid black; } .bgc{ background-color: yellow; } </style> </head> <body> <table> <thead> <td>表头1</td> <td>表头2</td> <td>表头3</td> </thead> <tbody> <tr> <td>表格一行一列</td> <td>表格一行二列</td> <td>表格一行三列</td> </tr> <tr> <td>表格二行一列</td> <td>表格二行二列</td> <td>表格二行三列</td> </tr> <tr> <td>表格三行一列</td> <td>表格三行二列</td> <td>表格三行三列</td> </tr> <tr> <td>表格四行一列</td> <td>表格四行二列</td> <td>表格四行三列</td> </tr> <tr> <td>表格五行一列</td> <td>表格五行二列</td> <td>表格五行三列</td> </tr> </tbody> </table> <script> var tr =document.queryselectorall('tr'); for(var i = 0;i < tr.length ;i++){ tr[i].onmouseover = function(){ this.classname = 'bgc'; } tr[i].onmouseout = function(){ this.classname = ''; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
您可能感兴趣的文章:
- vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents
- axios 处理 302 状态码的解决方法
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature
- react-native 在新版Xcode(10+)中运行出现的问题: node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论