zoukankan      html  css  js  c++  java
  • 表格样式(鼠标经过时整行变色)

    鼠标经过时行变色

    <style type="text/css">
    table{
     color:#565;
     font:12px Arial, Helvetica, sans-serif;
     }
    td{
     border-top:2px solid #fff;
     border-bottom:3px solid #b3de94;
     padding:9px;
     }
    tr{
     background:#dfc;
    }
    tr:hover,tr.hover{
     background-color:#595;
     color:#fff;
     }
    </style>
    </head>

    <body>
    <table summary="book list">
    <caption>Book List</caption>
    <tr>
    <TD>Title</TD>
    <TD>ID</TD>
    <TD>Country</TD>
    <TD>price</TD>
    <TD>download</TD>
    </tr>
    <tr >
    <TD>tom</TD>
    <TD>41553552</TD>
    <TD>China</TD>
    <TD>$254</TD>
    <TD>dkir</TD>
    </tr>
    <tr>
    <TD>tom</TD>
    <TD>41553552</TD>
    <TD>China</TD>
    <TD>$254</TD>
    <TD>dkir</TD>
    </tr>
    <tr>
    <TD>tom</TD>
    <TD>41553552</TD>
    <TD>China</TD>
    <TD>$254</TD>
    <TD>dkir</TD>
    </tr>
    </table>
    <script language="javascript">
    var rows=document.getElementsByTagName('tr');//rows是一个行的数组,包含当前页中有的行
    for(var i=0;i<rows.length;i++)
    {
     rows[i].onmouseover=function(){
      this.className='hover';
      }
      rows[i].onmouseout=function(){
      this.className='';
      }
     }
    </script>

  • 相关阅读:
    es6之Promise
    es6之Proxy,Reflect
    js之对象
    Set,Map与Array,Object对比
    es6之数据结构 set,WeakSet,mapWeakMap
    es6之Symbol
    flex布局
    盒子模型,top和margin-top
    POJ1274-The Perfect Stall
    Codeforces 671D. Roads in Yusland 题解
  • 原文地址:https://www.cnblogs.com/weixiao/p/2209775.html
Copyright © 2011-2022 走看看