De kompoos.nl is een webmaster-site. De pagina's zijn spartaans "leeg", en er is geen enkele aandacht voor een "leuke opmaak" van de pagina's. Functioneel heet dat... Het is niet anders. Normaliter wordt er niet aan hoveren gedaan. Maar dat geldt natuurlijk niet voor jouw website. Waarom is hover zo belangrijk, en waarom moet je er "ruim gebruik" van maken? Lees gewoon verder...
Ga even met jouw muis over één of meer links. Het hover effect zorgt er voor dat jouw bezoekers (zonder na te hoeven denken) weten dat het links zijn. Probeer er geen "kermis" van te maken. Het is heel erg vermoeiend om fel gekleurde links te moeten "aanschouwen" die ook nog een schril contrast met de hover-kleuren ten toon spreiden. Houd het "rustig".
Als je over de paragraphs heen gaat (met jouw muis) zal je zien dat de content een lichtgroene achtergrond krijgt. Dit dient er voor om dát gedeelte (van de tekst) extra aandacht te geven en alle bijelkaar horende tekst te selecteren. Een bezoeker weet nu precies tot waar hij moet lezen (einde van de paragraph is duidelijk zichtbaar gemaakt).
Bezoekers vinden het nu eenmaal prettig als een pagina interactie met hun heeft. Een pagina waar de cursor overheen-gaat zonder dat er ook maar iets gebeurt, wordt niet gewaardeerd. En het is een kleine moeite om alle plaatjes een beetje te laten oplichten bij een hover, of een iets ander kleur border of... of... (vul het zelf maar in).
De hover bij de H1 (helemaal bovenaan, tekst = kompoos.nl) is een voorbeeld van wat je absoluut niet moet doen. Nooit zonder reden headers of andere "sturende zaken" zinloos "animeren". Je brengt mensen in de war, omdat ze niet begrijpen waarom opeens een header van kleur verandert. En sommige mensen irriteren zich mateloos aan het onnodig "kerstbomen" van een webpagina. En ik hoef niet uit te leggen dat dat slecht voor de statistieken is...
Hieronder nog de stylesheet zoals op deze pagina is gebruikt (zonder de "slechte stukken").
<style type="text/css">
a{color:#000;background:inherit}
a:hover{color:#000;background:#ccc;padding:5px;margin:-5px}
p{display:block}
p:hover{color:#000;background:#efe;}
</style>