技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

鼠標(biāo)移到表格上時(shí),鼠標(biāo)所在行放大高亮顯示【實(shí)例】

作者:admin    時(shí)間:2020-2-24 17:40:8    瀏覽:

本文給大家介紹一個(gè)比較有趣的CSS Table表格,當(dāng)鼠標(biāo)移到表格上時(shí),鼠標(biāo)所在行放大高亮顯示。

 

鼠標(biāo)所在行放大高亮顯示

鼠標(biāo)所在行放大高亮顯示

demo

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    
<style type="text/css">

* {
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);}


</style>
</head>
<body>

<h1>Race Times</h1>

<table id="racetimes">
<tr id="firstrow"><th>Race</th><th>Location</th><th>Distance (in kilometres)</th><th>Time</th></tr>
<tr><td>SAIT Open</td><td>Calgary</td><td>5</td><td></td></tr>
<tr><td>CALTAF Classic</td><td>Calgary</td><td>1.5</td><td>5.00</td></tr>
<tr><td>Calgary Marathon</td><td>Calgary</td><td>21.1</td><td>2:00.00</td></tr>
<tr><td>Zombie Survivor</td><td>Cochrane</td><td>5</td><td>25.00</td></tr>
<tr><td>Run for Women</td><td>Calgary</td><td>5</td><td>20.00</td></tr>
</table>

</body>
</html>

execcodegetcode

代碼分析

放大高亮顯示的行背景顏色設(shè)置,可把#ff0改為你想要的顏色。

tr:hover:not(#firstrow), tr:hover td:empty {background: #ff0; pointer-events: visible;}

相關(guān)文章

標(biāo)簽: css3  table  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */