› 柴寒宇宸 › 日志

柴寒宇宸

http://www.javakc.com

设计一个table表格，当鼠标悬停时，改变td的背景颜色和鼠标样式，效果如下：

2022-01-13 15:30:22 查看(131) 回复(0)

编号	姓名	电话	住址
001	杨铮	13844951495	唐山
002	杨浩	13854384858	廊坊
003	李东宇	13954405045	邢台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style type="text/css">
        table{
           width: 360px;
           height: 250px;
           background-color:#7FFF00;
            border-collapse: collapse;
        }
        td{
            width: 50px;
            height: 25px;
            border: 1px solid black;
            text-align: center;
        }
        .a1{
           text-align: left;
        }
        .a:hover{
            background-color: #8B008B;
        }
    </style>
</head>
<body>
    <table frame="void">
        <tr>
            <td class="a1">编号</td>
            <td class="a1">姓名</td>
            <td class="a1">电话</td>
            <td class="a1">住址</td>
        </tr>
        <tr>
            <td class="a">001</td>
            <td class="a">杨峥</td>
            <td class="a">13844951495</td>
            <td class="a">唐山</td>
        </tr>
        <tr>
            <td class="a">002</td>
            <td class="a">杨浩</td>
            <td class="a">13854384858</td>
            <td class="a">廊坊</td>
        </tr>
        <tr>
            <td class="a">003</td>
            <td class="a">李东宇</td>
            <td class="a">13954405045</td>
            <td class="a">邢台</td>
        </tr>

    </table>
</body>
</html>