Wie hebe ich Zeilen und Spalten in einer Tabelle beim Hover mithilfe von CSS hervor?

Zeilen und Spalten in einer Tabelle beim Hover mit CSS hervorheben

Bei dieser Frage möchte der Benutzer sowohl eine Zeile als auch eine Spalte hervorheben Bewegen Sie den Mauszeiger über eine HTML-Tabelle. Sie möchten, dass sich die Hervorhebung von einer Achse zur anderen erstreckt und sich an der schwebenden Zelle schneidet.

CSS-Lösung

Hier ist eine reine CSS-Lösung, die den gewünschten Effekt erzielt:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

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

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

	50kg	55kg	60kg	65kg	70kg
160cm	20	21	23	25	27
165cm	18	20	22	24	26
170cm	17	19	21	23	25
175cm	16	18	20	22	24

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; }

Erklärung

Dieses CSS verwendet eine Kombination aus Pseudoelementen, absoluter Positionierung und Z-Indizierung, um den gewünschten Effekt zu erzielen.

• Die Pseudoelemente ::before und ::after erstellen unsichtbare Boxen vor und nach den Zielelementen (Zeilen und Spalten).
• Durch die absolute Positionierung können diese Boxen über die Grenzen ihrer übergeordneten Elemente hinausragen .
• Durch die Einstellung des Z-Index auf -1 wird sichergestellt, dass sich diese Felder unter den tatsächlichen Tabellenzellen befinden, sodass sie die Benutzerinteraktionen nicht beeinträchtigen.

HTML

Das entsprechende HTML-Markup lautet wie folgt:

In diesem Markup werden die Klassen .row und .col zu den Tabellenkopfelementen hinzugefügt, um sie von regulären Zeilen und Spalten zu unterscheiden für unterschiedliche Stile, falls gewünscht.

Diese Lösung bietet einen flexiblen Ansatz zum Hervorheben von Tabellenzeilen und -spalten beim Hover, ohne dass JavaScript oder externe Bibliotheken erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie hebe ich Zeilen und Spalten in einer Tabelle beim Hover mithilfe von CSS hervor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!