Rollover

Probleem

Hoe kan je een rij van achtergrondkleur te veranderen als de muis er overheen zweeft? En hoe zorg je ervoor dat alleen de rijen met een boek selectbaar zijn. Dus niet de rijen met de kolomtitels.

Dat is nog manier om de leesbaarheid van de gegevens in tabelvorm te verhogen.

Design

Dit is een zeer eenvoudige oplossing voor. Je hoeft alleen de volgende stijlregel aan je CSS toe te voegen:

.datatable tr: hover {background-color: # DFE7F2; color: # 000; }

Klaar is Kees!

We hebben al gezien hoe je pseudoklasse :hover kan gebruiken met het <a> element. Welnu je kan de pseudoklasse :hover op andere elementen ook gebruiken om leuke effecten te creëren.

Let erop dat de :hover pseudoklasse stijlregel na de standaard stijlregels voor tr komen!!!!

Om het table element te kiezen waarvan het class attribuut is ingesteld op spreadsheet schrijf je het table element onmiddellijk gevolgd door een punt en dan de naam van de klasse:

table.spreadsheet tr:hover {
    background-color: #DFE7F2;
    color: #000000;
}

De kolom- en rijkoppen blijven buiten schot omdat we de stijlregel alleen voor het th element gedefinieerd hebben en niet voor de td elementen.

Vooraleer de rollover uit te proberen schakelen we de eigenschap voor andere kleur voor alternerende rijen uit.

Het resultaat is te zien in de volgende CodePen: