CSS Cursors
De CSS cursor eigenschappen kunnen worden gebruikt om het cursortype (muisaanwijzer) te veranderen wanneer de muis over een bepaald gebied of over een link op een webpagina beweegt.Het uiterlijk van de cursor wijzigen
Bijna alle internet browsers tonen meestal de muisaanwijzer over elk leeg deel van een webpagina, de muisaanwijzer verandert in een hand als je over elk gekoppeld of klikbaar item beweegt en de bewerkingscursor is zichtbaar als je over elk tekst- of tekstveld beweegt. Met CSS kun je al die eigenschappen opnieuw in stellen, zo kun je zelf bepalen hoe de cursor wordt weergegeven.
Voorbeeld:
.cursor-demo span {
min-width: 100px;
padding: 5px 10px;
margin-bottom: 5px;
display: inline-block;
border: 1px solid grey;
border-radius: 3px;
background-color: aliceblue;
}
De onderstaande tabel toont de verschillende cursors die de meeste browsers accepteren. Plaats de muisaanwijzer op de "Test" link in de uitvoerkolom om die cursor weer te geven.
| Look | Waarde | Eigenschap | Voorbeeld |
|---|---|---|---|
 |
default | a:hover { cursor: default; } | Test |
 |
pointer | a:hover { cursor: pointer; } | Test |
 |
text | a:hover { cursor: text; } | Test |
 |
wait | a:hover { cursor: wait; } | Test |
 |
help | a:hover { cursor: help; } | Test |
 |
progress | a:hover { cursor: progress; } | Test |
 |
crosshair | a:hover { cursor: crosshair; } | Test |
 |
move | a:hover { cursor: move; } | Test |
 |
url() | a:hover { cursor: url( "custom.cur" ), default; } | Test |
Een aangepaste cursor maken
Het is mogelijk om zelf een cursor te maken en deze te gebruiken. De cursor eigenschap verwerkt een lijst met door de gebruiker ingestelde cursorwaarden. Als de eerste cursorwaarde onjuist is opgegeven of niet kan worden gevonden, wordt de volgende cursor waarde uit de lijst gebruikt, dit gaat net zo lang door totdat er een bruikbare cursor is gevonden. Als geen van de door de gebruiker ingestelde cursors geldig zijn of wordt ondersteund door de browser, wordt in plaats daarvan de standaardcursor aan het einde van de lijst gebruikt.
In het bovenstaande voorbeeld is custom.gif en custom.cur het aangepaste cursorbestand, dat we hebben geüpload naar de server, als de aangepaste cursor ontbreekt of niet wordt ondersteund door de browser dan zal de standaard (default) cursor worden weergegeven.
 |
Als je een aangepaste cursor wilt gebruiken, moet je niet vergeten om aan het einde van de lijst een standaard (default) cursor op te geven, anders wordt de aangepaste cursor niet correct weergegeven. |
Hier is een live demonstratie van een aangepaste cursor:
 |
Het standaard formaat dat gebruikt kan worden voor cursors is het .cur formaat. Je kunt echter afbeeldingen zoals .jpg en .gif makkelijk converteren naar het .cur formaat. |
