拿JS怎样做鼠标经过表格变色的效果？
发布时间：2022-01-14 09:49:15 所属栏目：语言 来源：互联网
导读：用JS怎样做鼠标经过表格变色的效果？也就是鼠标经过表格的某行时，这行变色显示的效果，这样的好处的就是一目了然看到所选的信息，小编觉得比较有用，因此分享给大家做个参考，感兴趣的朋友就继续往下看吧。 表格表头为蓝色，表主体为白色，当鼠标放到表的非
|
用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> （编辑：拼字网 - 核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐