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

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

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>

Anzeige:

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!