Wie kann ich beim Hovern nur mit CSS sowohl Tabellenzeilen als auch -spalten hervorheben?

Hervorheben von Tabellenzeilen und -spalten beim Hover mithilfe der CSS-Pseudoklasse „Hover“

In diesem Szenario werden sowohl die Tabellenzeile als auch die Tabellenspalte beim Hover hervorgehoben ist mit semantischen Elementen wie möglich. und . Lassen Sie uns eine reine CSS-Methode erkunden:

Pseudoelemente zum Hervorheben verwenden

Um die Zeile und Spalte hervorzuheben, verwenden wir die Pseudoelemente ::before und ::after. Elemente. Dadurch werden virtuelle Elemente erstellt, die absolut positioniert sind und außerhalb des Dokumentflusses existieren:

td:hover::before, /* Highlight rows on hover */
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><tr class="row">
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
</tr>

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

• Das Bewegen von td oder .row löst die Hervorhebung der gesamten Zeile aus.
• td oder .col Wenn Sie mit der Maus darüber fahren, wird die Hervorhebung der gesamten Spalte ausgelöst.
• z-index: -1 platziert die Hervorhebungen unterhalb der Tabellendatenzellen.
• Position: Absolut und extrem große Abmessungen ermöglichen Hervorhebungen, die über Zellgrenzen hinausgehen.
• Überlauf: In der Tabelle ausgeblendet, verbirgt jeden Überlauf.

CSS-Klassen für Spezifität

Im HTML fügen wir Klassen wie . row und .col, um das Zielelement klar anzugeben:

Fazit

Diese Lösung hebt sowohl Zeilen als auch Spalten beim Hover ausschließlich mithilfe von CSS hervor und verlässt sich nicht darauf JavaScript oder jQuery. Es funktioniert in allen modernen Browsern und lässt sich in älteren Browsern problemlos verschlechtern.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Hovern nur mit CSS sowohl Tabellenzeilen als auch -spalten hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!