鼠标经过的行，变色

最新推荐文章于 2022-11-17 20:39:02 发布

南逗

最新推荐文章于 2022-11-17 20:39:02 发布

阅读量571

点赞数

本文链接：https://blog.csdn.net/weixin_46217523/article/details/105951430

版权

案例分析
1.用到鼠标经过onmouseover 鼠标离开 onmouseout
2.核心思路：鼠标经过tr行。当前的行变背景颜色，鼠标离开去掉当前颜色
3.注意：第一行（thead里面的行）不需要边换颜色，因此我们获取的是tbody里面的行

HTML代码，如下所示

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			table{
				margin: 0 auto ;
				width: 250px;
				height: 180px;
				text-align: center;
			}
			thead tr{
				
				height: 30px;
				background-color:skyblue;
			}
			thead th{
				text-align: center;
			}
			tbody tr{
				height: 30px;
			}
			tbody td{
				
				border-bottom: 1px solid darkgrey;
				font-size:

最低0.47元/天解锁文章

南逗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标经过的行，变色

案例分析1.用到鼠标经过onmouseover 鼠标离开 onmouseout2.核心思路：鼠标经过tr行。当前的行变背景颜色，鼠标离开去掉当前颜色3.注意：第一行（thead里面的行）不需要边换颜色，因此我们获取的是tbody里面的行HTML代码，如下所示<!DOCTYPE html><html><head> <meta charset...
复制链接

扫一扫