Een hover-effect in CSS maak je met de pseudo-class ‘:hover’. Hiermee kunt u specificeren hoe een element eruit moet zien wanneer de gebruiker er met de muis overheen gaat. Het basisformaat voor het gebruik van de ‘:hover’ pseudo-class is als volgt:
```
selector:hover {
css-eigenschappen
}
```
Hier is een voorbeeld van hoe een anchor-tag eruit zou zien met een hover-effect:
```
a:hover {
color: red;
}
```
In dit voorbeeld verandert de kleur van de linktekst in rood wanneer je er met de muis overheen gaat.
Je kunt elke CSS-eigenschap veranderen met de ‘:hover’ pseudo-class, niet alleen de kleur. Dit omvat veranderingen in lay-outs, zoals randen en achtergrondkleuren, evenals typografieke veranderingen zoals lettergrootte en -stijl. Hier is een voorbeeld van een div-element dat van achtergrondkleur en lettergrootte verandert:
```
div:hover {
background-color: blue;
font-size: 20px;
}
```
In dit voorbeeld wordt de achtergrondkleur van het div-element blauw en de lettergrootte wordt 20px wanneer de muis over het element wordt bewogen.
