快捷導(dǎo)航

javascript table美化鼠標(biāo)滑動(dòng)單元格變色

更新時(shí)間：2008年06月10日 21:14:21 作者：

效果非常不錯(cuò)的table美化，當(dāng)鼠標(biāo)滑過(guò)去，背景色變換效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"         "<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank">http://www.w3.org/TR/html4/strict.dtd</a>"> <html> <head>     <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個(gè)是關(guān)鍵   --cssrain.cn */ tbody td.on {background:green;}    thead th.on {background:red;} tbody th.on {background:red;} </style>  </head> <body> <div   id="wppm3vysvbp"   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> </body> </html> 本篇文章來(lái)源于 cssrain.cn 原文鏈接：http://www.cssrain.cn/article.asp?id=20

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

javascript填充默認(rèn)頭像方法
本篇文章通過(guò)代碼實(shí)例給大家講述了如何javascript填充默認(rèn)頭像以及相代碼分享，對(duì)此有興趣的朋友可以學(xué)習(xí)下。
2018-02-02
js中l(wèi)ess常用的方法小結(jié)
下面小編就為大家?guī)?lái)一篇js中l(wèi)ess常用的方法小結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
分享ES6?20個(gè)經(jīng)常使用技巧
這篇文章主要分享ES6?20個(gè)經(jīng)常使用技巧，作用是使JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言，具體使用詳情需要的小伙伴可以參考下面文章內(nèi)容
2022-06-06
pace.js和NProgress.js兩個(gè)加載進(jìn)度插件的一點(diǎn)小總結(jié)
這兩個(gè)插件都是關(guān)于加載進(jìn)度動(dòng)畫的，今天就和大家一起了解下pace.js和NProgress.js兩個(gè)加載進(jìn)度插件的一點(diǎn)小總結(jié)，感興趣的朋友一起看看吧
2018-01-01
JavaScript數(shù)組去重問(wèn)題的深入研究
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重問(wèn)題的相關(guān)資料,一般都是在面試的時(shí)候才會(huì)碰到,一般是要求手寫數(shù)組去重方法的代碼,需要的朋友可以參考下
2021-10-10
JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開(kāi)發(fā)的時(shí)候,很多人多多少少都會(huì)被this的指向問(wèn)題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
thinkjs之頁(yè)面跳轉(zhuǎn)同步異步操作
這篇文章主要介紹了thinkjs之頁(yè)面跳轉(zhuǎn)同步異步操作,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
JS修改地址欄參數(shù)實(shí)例代碼
本文給大家介紹js修改地址欄參數(shù)的實(shí)例代碼，并給大家附上用JS動(dòng)態(tài)改變地址欄內(nèi)容 window.location.href window.location.hash的方法，比較實(shí)用，需要的朋友參考下吧
2016-06-06
禁用鍵盤上的(全局)指定鍵兼容iE、Chrome、火狐
確定你是要禁用全局的還是指定控件，如果是全局的就只要監(jiān)聽(tīng)window.keyDown = function(event){.....} 一樣一樣的，感興趣的朋友可以了解下哈
2013-05-05
Array.filter中如何正確使用Async
這篇文章主要介紹了Array.filter中如何正確使用Async,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11