Rumah > hujung hadapan web > html tutorial > 使用table鼠标移上去改变单元格边框颜色的方法

使用table鼠标移上去改变单元格边框颜色的方法

高洛峰
Lepaskan: 2017-03-17 10:16:03
asal
3354 orang telah melayarinya

表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacingempty-cells 属性。

用td:hover,显示不全

使用table鼠标移上去改变单元格边框颜色的方法

搜索了好久,没有找到好的方法,用左右边框也不完美。

于是就在想,移上去的时候给加个伪元素after,绝对定位。


定义和用法


:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 content 属性。


<!DOCTYPE html><html><head><meta charset="utf-8"><title>border-hover</title><style type="text/css">.w1000{width:1000px;margin:0 auto;}.table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;}.table tr th{border: 1px solid #d9dbda;padding:5px 0;}.table tr td{border: 1px solid #d9dbda;}.height2{height:61px;line-height:61px;}.height1{height:30px;line-height:30px;}.table tr td:hover .list-p{position:relative;}.table tr td:hover .list-p:after{
    content: "";
    height: 100%;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 100%;
    z-index: 100;}.table tr td.list01-td:hover .list-p:after{
    border: 1px solid #b1bac6;}.table tr td.list02-td:hover .list-p:after{
    border: 1px solid #76ca5a;}.table tr td.list03-td:hover .list-p:after{
    border: 1px solid #ff9600;}</style></head><body>
    <p class="w1000">
        <table class="table" cellpadding="0" cellspacing="0" >
            <thead>
                <tr>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                    <th>周日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2" class="list01-td"><p class="list-p height2">星期</p></td>
                    <td colspan="5" class="list02-td" ><p class="list-p height1">星期</p></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="list02-td"><p class="list-p height1">星期</p></td>
                    <td colspan="4"></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="3"></td>
                    <td colspan="2" class="list03-td"><p class="list-p height1">星期</p></td>
                    <td colspan="2"></td>
                </tr>
            </tbody>
        </table>
    </p></body></html>
Salin selepas log masuk


显示:

使用table鼠标移上去改变单元格边框颜色的方法

提醒:

1.开始做的时候没做合并列的,合并行的简单点不需要加高度。

Atas ialah kandungan terperinci 使用table鼠标移上去改变单元格边框颜色的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan