共计 1093 个字符，预计需要花费 3 分钟才能阅读完成。
本文给大家介绍一个比较有趣的CSS Table表格，当鼠标移到表格上时，鼠标所在行放大高亮显示。
效果展示：
鼠标所在行放大高亮显示：
HTML代码：
<html>
Table V01
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: sans-serif;
padding-top:30px;
}
* {font-family: Helvetica Neue, Arial, sans-serif; }
body { background-image: linear-gradient(#aaa 25%, #000); }
h1, table { text-align: center; }
table {border-collapse: collapse; width: 70%;
margin: 0 auto 5rem;}
th, td { padding: 1.5rem; font-size: 1.3rem; }
tr {background: hsl(50, 50%, 80%); }
tr, td { transition: .4s ease-in; }
tr:first-child {background: hsla(12, 100%, 40%, 0.5); }
tr:nth-child(even) { background: hsla(50, 50%, 80%, 0.7); }
td:empty {background: hsla(50, 25%, 60%, 0.7); }
tr:hover:not(#firstrow), tr:hover td:empty
{background: #ff0; pointer-events: visible;}
tr:hover:not(#firstrow) { transform: scale(1.2); font-weight: 700;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.5);}
Race Times
Race Location Distance (in kilometres) Time
SAIT Open Calgary 5
CALTAF Classic Calgary 1.5 5.00
Calgary Marathon Calgary 21.1 2:00.00
Zombie Survivor Cochrane 5 25.00
Run for Women Calgary 5 20.00代码分析：
放大高亮显示的行背景颜色设置，可把#ff0改为想要的颜色。
tr:hover:not(#firstrow), tr:hover td:empty {background: #ff0; pointer-events: visible;}正文完
