鼠标放上去,有个灰色背景的显示

鼠标放上去,有个灰色背景的显示

<html>

<style>

    .datatable

{

    border-collapse:collapse;

    color:#000000;

    font-family:Arial, Helvetica, sans-serif;

    border:1px solid #000099;

    font-size:14px;

}

.datatable th,.datatable td

{

    text-align:center;

    border:1px solid #000000;

    padding-left:4px;

    padding-top:5px;

    padding-bottom:5px;

    padding-right:4px;

}

.datatable th

{

    color:#000066;

    font-family:宋体,Arial, Helvetica, sans-serif;

    background-color:#CCCCCC;

}

.datatable caption

{

    border:solid #000000 1px;

    background-color:#CCFF66;

    padding:5px 0 5px 0;

}

</style>

<head>

<style type="text/css">

    .datatable tr:hover,.datatable tr.hilite

    {

    background-color:#ccc;

    }

</style>

<script type="text/javascript">

    var rows = document.getElementsByTagName('tr');//取得行

    for(var i=0 ;i<rows.length; i++)

    {

        rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'

            this.className += 'hilite';

        }

        rows[i].onmouseout = function(){//鼠标移开,改变该类的名称

            this.className = this.className.replace('hilite','');

        }

    }

</script>

</head>


<body>

    <table class="datatable" summary="test">

        <caption>Student List</caption>

        <tr>

            <th>Student Name</th>

            <th>Date of Birth</th>

            <th>Class</th>

            <th>ID</th>

        </tr>

        <tr>

            <td>Joe Bloggs</td>

            <td>27/02/1993</td>

            <td>Mrs Jones</td>

            <td>12009</td>

        </tr>

        <tr>

            <td>William Smith</td>

            <td>04/03/1992</td>

            <td>Mrs Jones</td>

            <td>12010</td>

        </tr>

        <tr>

            <td>William Smith</td>

            <td>04/03/1992</td>

            <td>Mrs Jones</td>

            <td>12010</td>

        </tr>

        <tr>

            <td>William Smith</td>

            <td>04/03/1992</td>

            <td>Mrs Jones</td>

            <td>12010</td>

        </tr>

    </table>

</body>

</html>


你可能感兴趣的:(鼠标放上去,有个灰色背景的显示)