Heim > Web-Frontend > HTML-Tutorial > So ändern Sie die Randfarbe der Zelle, indem Sie die Maus über die Tabelle bewegen

So ändern Sie die Randfarbe der Zelle, indem Sie die Maus über die Tabelle bewegen

高洛峰
Freigeben: 2017-03-17 10:16:03
Original
3354 Leute haben es durchsucht

Die Tabelle definiert border-collapse:collapse; die Ränder werden zu einem einzigen Rand zusammengeführt. Die Attribute border-spacing und empty-cells werden ignoriert.

Verwenden Sie td:hover, die Anzeige ist unvollständig

So ändern Sie die Randfarbe der Zelle, indem Sie die Maus über die Tabelle bewegen

Ich habe lange gesucht, aber keine gute Methode gefunden und bin übriggeblieben und die rechten Ränder sind auch nicht perfekt.

Also habe ich darüber nachgedacht, beim Verschieben nach oben ein Pseudoelement mit absoluter Positionierung hinzuzufügen.


Definition und Verwendung


:after Pseudo-Element fügt Inhalt nach dem Element hinzu.

Mit diesem Pseudoelement können Ersteller generierte Inhalte am Ende des Elementinhalts einfügen. Standardmäßig ist dieses Pseudoelement inline, dies kann jedoch mit dem Attribut display geändert werden.

Hinweis: Internet Explorer 8 (und höher) unterstützt das Inhaltsattribut, wenn !DOCTYPE angegeben ist.


nbsp;html><meta><title>border-hover</title><style>.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>
    <p>
        </p>
Nach dem Login kopieren
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
周一周二周三周四周五周六周日

星期

星期

星期

星期

    


Anzeige:

So ändern Sie die Randfarbe der Zelle, indem Sie die Maus über die Tabelle bewegen

Erinnerung:

1. Ich habe keine Spalten zusammengeführt, als ich damit begonnen habe. Das Zusammenführen von Zeilen ist einfach und Sie müssen keine Höhe hinzufügen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Randfarbe der Zelle, indem Sie die Maus über die Tabelle bewegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage