CSS鼠标经过样式设置(经过表格变色和控制表格隔行变色)

发布时间:2020-05-04编辑:脚本学堂
本文介绍了CSS鼠标经过样式的设置实例,实现鼠标经过表格变色和控制表格隔行变色,有需要的朋友参考下。

例1,鼠标经过表格变色样式:
 

复制代码 代码示例:
<style>  
  table   {   background-color:#000000;   cursor:hand;   width:100%;   }  
  td   {  
  /*设置onmouseover事件*/  
  onmouseover:   expression(onmouseover=function   (){this.style.borderColor   ='blue';this.style.color='red';this.style.backgroundColor   ='yellow'}); 
  /*设置onmouseout事件*/  
  onmouseout:   expression(onmouseout=function   (){this.style.borderColor='';this.style.color='';this.style.backgroundColor   =''});  
  background-color:#ffffff;  
  }  
  </style>
 

例2,控制表格隔行变色:
简单应用:
 

复制代码 代码示例:
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->

例3,高级应用:每个单元格变色
 

复制代码 代码示例:
<style type="text/css">
<!--
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"))}
-->
</style>

添加CSS文件引用:
 

复制代码 代码示例:
<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />