当前位置：网络学院首页 >> 设计教程 >> DIV特效代码 >> table美化鼠标滑动单元格变色效果

table美化鼠标滑动单元格变色效果

来源：中国设计秀作者：点击：985 加入收藏

关键字：鼠标单元格 WEB标准 css

代码如下：[点击运行，可预览效果]

<!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 lang="en">
<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个是关键   --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>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2008-07-18 00:29:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/edu/html/article_4981.html

热点文章/相关文章