全球主机交流论坛

标题: css一个问题求助 [打印本页]
作者: nbweb    时间: 2013-3-14 10:24
标题: css一个问题求助
现在用的tr td表格，要求鼠标划过背景颜色改变，现在是，第一行固定的背景色，鼠标划过第一行，不变色，其它的行变颜色，怎么个写法？

谢谢
作者: ☆校长☆    时间: 2013-3-14 10:27
那么高端哦？
作者: nbweb    时间: 2013-3-14 10:40
是啊。。。。
作者: 八戒    时间: 2013-3-14 10:49
  1. <table>
  2.         <thead>
  3.                 <tr>
  4.                         <td>
  5.                                 第一行
  6.                         </td>
  7.                 </tr>
  8.         </thead>
  9.         <tbody>
  10.                 <tr onmouseover="this.style.background='#D3E9FC';" onmouseout="this.style.background=''; this.style.borderColor=''">
  11.                         <td>
  12.                                 第二行
  13.                         </td>
  14.                 </tr>
  15.                 <tr onmouseover="this.style.background='#D3E9FC';" onmouseout="this.style.background=''; this.style.borderColor=''">
  16.                         <td>
  17.                                 第三行
  18.                         </td>
  19.                 </tr>
  20.         </tbody>
  21. </table>
复制代码
作者: nswdhy    时间: 2013-3-14 10:56
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7.         table tr:hover{background:#f60;}
  8.         table tr.first_tr{background:#ddd;}
  9.         table tr.first_tr:hover{background:ddd;}
  10. </style>
  11. </head>
  12. <body>
  13. <table width="100%" border="1">
  14.         <tr class="first_tr">
  15.                 <td width="50%">第一行</td>
  16.                 <td>第一行</td>
  17.         </tr>
  18.         <tr>
  19.                 <td width="50%">第2行</td>
  20.                 <td>第2行</td>
  21.         </tr>
  22.         <tr>
  23.                 <td width="50%">第3行</td>
  24.                 <td>第3行</td>
  25.         </tr>
  26.         <tr>
  27.                 <td width="50%">第4行</td>
  28.                 <td>第4行</td>
  29.         </tr>
  30.         <tr>
  31.                 <td width="50%">第5行</td>
  32.                 <td>第5行</td>
  33.         </tr>
  34. </table>
  35. </body>
  36. </html>
复制代码
加分吧骚年
作者: 麦子花开    时间: 2013-3-14 11:05
楼上和楼楼上都是大神
我就稍稍总结一下

js和css的伪类都可以实现
作者: nbweb    时间: 2013-3-14 11:15
八戒 发表于 2013-3-14 10:49

没地方加分啊。多谢
作者: nbweb    时间: 2013-3-14 11:22
nswdhy 发表于 2013-3-14 10:56
加分吧骚年

没地方加分啊，用你这个，可以。多谢啦



欢迎光临 全球主机交流论坛 (https://443502.xyz/) Powered by Discuz! X3.4