CSS實現滑鼠滑過表格變色

來源:互聯網
上載者:User
 簡單的隔行變色:
<style type="text/css"> 
<!-- 
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} 
--> 
</style> 
<table> 
<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> 
</table>
-------------------------------
每個儲存格變色:
<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> 
<table> 
<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> 
</table>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.