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

html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...
html 图片鼠标移上去点亮,CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果...
01 效果描述 CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果 02 效果图摘 03 关键代码 html: CSS: .hover14{ width:500px; float:left; } . ...
html鼠标悬停边框变虚线,css设置表格的边框为实线还是虚线，+鼠标悬停显示提示字...
虚线在css里面添加 td {border-bottom:1px dashed #000000;} 实线在css里面添加 td {border:1px solid black;} -------- ...
html js鼠标悬停事件,鼠标悬停在轴标签d3.js javascript上的事件
有没有人知道是否有可能在y轴标签上有鼠标悬停事件? 例如,我在下面有一个散点图. y轴上的标签是"area1","area2"和"area3" ...
php改变鼠标箭头形状手指,dreamweaver怎么让鼠标移过button按钮时,鼠标变成手指形状手指形状?...
用cursor属性可以实现,可选值及说明如表2.1.6.2所示. 表2.1.6.2 cursor属性的可选值可选值说明 hand手型 crosshair十字型 text鼠标移动到水平文本上的样式 w ...
html鼠标悬停区域拉伸,html – ：将鼠标悬停在具有边框半径的div上
这里的问题是子元素不继承父元素的border-radius.有两种方法可以实现您想要的:您可以将子元素的border-radius设置为匹配或大于父元素的radius,或者将父元素的overflow属 ...
vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
最后,在查看结果中,发现滑过鼠标事件将触发该事件,但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件,遮罩层将消失并重复出现. 开关. 为了缓解这种情况,setTimeout也用于延迟显示和隐藏在 ...
鼠标悬停显示图片html5,JavaScript 鼠标悬停图片，显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下世界上最 ...
HTML5+CSS3小实例：鼠标悬停发光按钮
HTML5+CSS3做一组鼠标悬停发光的按钮,鼠标悬停,按钮边框延展开来,首尾相连时填充按钮,过程伴随发光.倒影效果,并通过hue-rotate实现每个按钮不同颜色. 效果: 源码: <!DOC ...

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

Race Times

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

最新文章

热门文章