Home > Technology > CSS设计（鼠标滑过表格变色）

CSS设计（鼠标滑过表格变色）

July 2nd, 2009 Leave a comment Go to comments

这里介绍的鼠标划过变色和a:hover{}的属性是不一样的！验证可用，请灵活运用之！

第一种: expression

代码如下:

<!--
.tablestyle{
 background-color:#CCCCCC; border:#ff0000 solid 2px; border-collapse:collapse;  cursor:hand;   width:100%;
 }
.tablestyle td{ border:#ff0000 solid 2px; border-collapse:collapse;}
.tablestyle tr{
 onmouseover:expression(onmouseover=function()
 {
  this.style.color='red';
  this.style.backgroundColor='yellow'
  });
 onmouseout:expression(onmouseout=function()
 {
 
  this.style.col
  this.style.backgroundColor=''
  }
 );
 }
-->
<table class="tablestyle" border="0" cellspacing="0" cellpadding="0" width="0">
<tbody>
<tr>
<td>11111111111</td>
<td>22222222222</td>
</tr>
<tr>
<td>33333333333</td>
<td>44444444</td>
</tr>
<tr>
<td>55555</td>
<td>66666666</td>
</tr>
<tr>
<td>77777777777</td>
<td>8888888888</td>
</tr>
</tbody></table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－
简单的隔行变色：

<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
<table border="0">
<tbody>
<tr>
<td>第1行</td>
<td>第1列</td>
</tr>
<tr>
<td>第2行</td>
<td>第2列</td>
</tr>
<tr>
<td>第3行</td>
<td>第3列</td>
</tr>
<tr>
<td>第4行</td>
<td>第4列</td>
</tr>
<tr>
<td>第5行</td>
<td>第5列</td>
</tr>
</tbody></table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

间隔单元格变色：

<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
 
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
<table border="0">
<tbody>
<tr>
<td>第1行</td>
<td>第1列</td>
</tr>
<tr>
<td>第2行</td>
<td>第2列</td>
</tr>
<tr>
<td>第3行</td>
<td>第3列</td>
</tr>
<tr>
<td>第4行</td>
<td>第4列</td>
</tr>
<tr>
<td>第5行</td>
<td>第5列</td>
</tr>
</tbody></table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都用到expression，实现变得很方便，但是，经测试，在IE6（其它版本我不知道）上很正常，在firefox上无任何反应…… ，要想在firefox上也有此效果，就要用第二种方法

（2）用JS

鼠标滑过变色：

<script type="text/javascript"><!--mce:0--></script>
<table id="mytable" border="0">
<tbody>
<tr>
<td>第1行</td>
<td>第1列</td>
</tr>
<tr>
<td>第2行</td>
<td>第2列</td>
</tr>
<tr>
<td>第3行</td>
<td>第3列</td>
</tr>
<tr>
<td>第4行</td>
<td>第4列</td>
</tr>
<tr>
<td>第5行</td>
<td>第5列</td>
</tr>
</tbody></table>

－－－－－－－－－－－－－－－－－－－－－－－－

隔行变色：

<script type="text/javascript"><!--mce:1--></script>
<table id="mytable" border="0">
<tbody>
<tr>
<td>第1行</td>
<td>第1列</td>
</tr>
<tr>
<td>第2行</td>
<td>第2列</td>
</tr>
<tr>
<td>第3行</td>
<td>第3列</td>
</tr>
<tr>
<td>第4行</td>
<td>第4列</td>
</tr>
<tr>
<td>第5行</td>
<td>第5列</td>
</tr>
</tbody></table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都要用到JS，还需要table有个id，可以对指定的table操作，但是，假如遇到某人的firefox装了NoScript的话……可以无视了

声明：原创文章-转载请注明Bruce|http://brucehan.com/本文链接地址： CSS设计（鼠标滑过表格变色）

Categories: Technology Tags: , ,
Bruce |
  1. 火山
    July 3rd, 2009 at 04:19 | #1
    Reply | Quote

    这玩意儿还真看不懂了，只会用现成的:(

  2. Bruce
    July 3rd, 2009 at 04:55 | #2
    Reply | Quote

    @火山 我只是调用它的Javascript代码，html的还是自己写好些！

  1. No trackbacks yet.