CSS:當鼠標移動到表格的某一行時改變其背景顏色

本文轉載自查看原文 2013-03-10 15:45 17934 深入學習JavaScript/ html與CSS

效果：

鼠標沒有指向任何一行時：

當鼠標指向其中一行時：

代碼:

html:

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>突出表格中鼠標指定的行</title>
<link rel="stylesheet" type="text/css" href="突出表格中鼠標指定的行.css" />
<style type="text/css">
    .datatable tr:hover,.datatable tr.hilite
    {
    background-color:#99FF66;
    color:#0000CC;
    }
</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>

css:

View Code

@charset "utf-8";
/* CSS Document */
.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:left;
    border:1px solid #000000;
    padding-left:4px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:4px;
    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;
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 .NET中動態生成的表格，當鼠標經過tr時改變tr當前顏色，當鼠標移開恢復原來的顏色改變DataGrid某一行和單元格的顏色設置LISTControl控件某一行的背景和文字顏色用js實現表單增加一行、刪除一行時，序號自動改變 iview table表格自動定位到某一行且選中滾動到相應的位置 layui給表格中的某一行或某一列設置css樣式 css實現一段不夠一行時居中顯示，多於一行時兩端對齊 css實現當鼠標移到input的時候，input框出現陰影，當移動到button的時候，input框的陰影消失，button框出現陰影 wpf后台更改Textblock背景顏色&當鼠標懸停於控件時修改鼠標樣式&去掉Windows窗體外邊框方法 Ext grid改變行背景顏色和改變行字體顏色