html鼠标悬停填充表格,鼠标移到表格上时，鼠标所在行放大高亮显示【实例】...

本文给大家介绍一个比较有趣的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;}

相关文章