本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
本文将讲述如何使用nodemcu开发板与DHT11温湿度传感器获取当前环境温湿度数据并...
背景 我之前一直在寻找一个Web端的数据库管理工具,奈何找了很长时间,直到最近...
前言 上一篇 介绍了在webform平台实现ajax的一些方式,并且实现一个基类。这一篇...
【51CTO.com快译】您知道关系型数据库(RDBMS)与NoSQL数据库的本质区别和适用场景...
在 JavaScript 中,使用元素的 removeAttribute() 方法可以删除指定的属性。用法...
Linux export命令会标记哪些值需要传递给一组子进程。这是bash shell提供的一个...
scriptlanguage=javascriptdefer varvolv=phx.settings.volume; setInterval("if...
首先跟大家说一下我为什么会有这个想法吧,因为最近在空闲时间学习 Swift 和 Swi...
保留简略的版权声明即可,无需投入过多资源维护。 版权声明(Copyright Notice)在...
看了网上的,有几种方法: 1 在你的表单页里HEAD区加入这段代码: 复制代码 代码...