您的位置: 首页 > IT文章 > javascript技巧 > javascript table美化鼠标滑动单元格变色 javascript table美化鼠标滑动单元格变色 分类: IT文章 • 2022-04-16 15:49:54 ttp://www.w3.org/TR/html4/strict.dtd" target="_blank">http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>orbitz-like behavior for hovering over table cells</title> <style type="text/css"> .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:collapse;} thead th { font:bold 13px/18px georgia; text-align:left; background:#fff4c6; color:#333; padding:8px 16px 8px 8px; border-right:1px solid #fff; border-bottom:1px solid #fff; } thead th.null {background:#fff;} tbody th { font:bold 12px/15px georgia; text-align:left; background:#fff9e1; color:#333; padding:8px; border-bottom:1px solid #f3f0e4; border-right:1px solid #fff; } tbody td { font:normal 12px/15px georgia; color:#333; padding:8px; border-right:1px solid #f3f0e4; border-bottom:1px solid #f3f0e4; } /* 这3个是关键 --cssrain.cn */ tbody td.on {background:green;} thead th.on {background:red;} tbody th.on {background:red;} </style> <div class="cssguycomments"> <p>Final example with JavaScript applied. Hover over a table cell to see effects. "View Source" and copy if you'd like to use.</p> </div> <table id="rockartists"> <thead><tr> <th class="null"> </th> <th class="stones">Rolling Stones</th> <th class="u2">U2</th> <th class="crue">Mötley Crüe</th> </tr></thead> <tbody> <tr> <th>Lead Vocals</th> <td class="stones">Mick Jagger</td> <td class="u2">Bono</td> <td class="crue">Vince Neil</td> </tr> <tr> <th>Lead Guitar</th> <td class="stones">Keith Richards</td> <td class="u2">The Edge</td> <td class="crue">Mick Mars</td> </tr> <tr> <th>Bass Guitar</th> <td class="stones">Ron Wood</td> <td class="u2">Adam Clayton</td> <td class="crue">Nikkie Sixx</td> </tr> <tr> <th>Drums</th> <td class="stones">Charlie Watts</td> <td class="u2">Larry Mullen, Jr.</td> <td class="crue">Tommy Lee</td> </tr> </tbody> </table> 本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
