Wie erweitert man CSS-Hover-Effekte über Zellgrenzen in Tabellen hinaus?

CSS-Hover-Effekte über Zellgrenzen hinaus erweitern: Tabellen in Spalten und Spaltengruppen hervorheben

Bei der Anzeige von Daten in Tabellenform werden bestimmte Zellen beim Hover hervorgehoben ist oft wünschenswert. Allerdings kann die Hervorhebung der Zeile und Spalte, die sich mit der schwebenden Zelle überschneiden, die Datenklarheit weiter verbessern. Dies ist besonders nützlich, wenn die Tabelle mehrere Maßeinheiten umfasst.

Reine CSS-Lösung

Glücklicherweise ist die Erzielung dieses erweiterten Hervorhebungseffekts mit reinem CSS möglich. Durch die Verwendung von Pseudoelementen (::before, ::after), Z-Index-Manipulation und absoluter Positionierung können wir Hervorhebungsüberlagerungen erstellen, die über Zellgrenzen hinausgehen.

Implementierung

Der folgende CSS-Code veranschaulicht die Implementierung:

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table border="1">
    <tr>
        <th></th>
        <th>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

HTML Struktur

Die entsprechende HTML-Struktur enthält zusätzliche Klassen .row und .col für Zeilen- bzw. Spaltenüberschriften:

Beispielausgabe

Wenn Sie mit der Maus über eine Zelle fahren, werden jetzt sowohl die entsprechende Zeile als auch die entsprechende Spalte hervorgehoben:

[Bild einer Tabelle mit hervorgehobener Zeile und Spalte]

Dieser Ansatz funktioniert nahtlos in modernen Browsern und lässt sich in älteren Browsern problemlos verschlechtern.

Das obige ist der detaillierte Inhalt vonWie erweitert man CSS-Hover-Effekte über Zellgrenzen in Tabellen hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!