Nodig: Microsoft Internet Explorer
De hover-functie (CSS) - deel 1
Allereerst iets over de term 'hover'. 'To hover' betekent letterlijk 'zweven'. Op het internet wordt met 'hovering' bedoeld: je muis boven iets houden, waarna er iets verandert. Bijvoorbeeld een rode tekst die groen wordt of een plaatje dat in een ander plaatje verandert. In plaats van 'hovering' lees je ook wel 'rollover' of 'mouseover'. Er zijn diverse termen voor dit effect. Ik hou het maar op 'hover'.
Hieronder een eenvoudige hover-code:
a:hover { color: #3399CC }
Deze code vermeld je in de style-tags van je HTML-pagina. Tussen de body-tags zet je de code voor een hyperlink. Als je nu je muis over de link hieronder beweegt, zie je dat de kleur verandert naar grijsblauw.
CSS Kleurenschema
Normaal bestaat de hover-code uit 4 onderdelen. Die onderdelen hebben een vaste volgorde. Dus gooi ze niet door elkaar, want dan krijg je allerlei problemen!
a:link { } - Gewone (onbezochte) link
a:visited { } - Bezochte link
a:hover { } - Hover hyperlink (de muis beweegt zich boven de link)
a:active { } - Actieve link (er wordt op geklikt)
Hieronder een uitgewerkte hover-code voor de style-tags:
a:link { text-decoration: underline; color: blue }
a:visited { text-decoration: underline; color: blue }
a:hover { text-decoration: none; color: magenta }
a:active { text-decoration: underline; color: blue }
In dit laatste voorbeeld zijn alle links blauw en onderstreept, maar zodra je je muis erboven houdt, verandert de tekst in de kleur magenta en verdwijnt de onderstreping.
Zie voorbeeld hieronder:
Online Color Schemer
* * *
Je kunt veel eigenschappen van de link veranderen:
Kleur
a:hover { color: red }
Grootte van het lettertype:
a:hover { font-size: 24pt }
Soort lettertype:
a:hover { font-family: verdana, arial, helvetica, sans-serif }
Onderstreping:
a:hover { text-decoration: underline }
Onderstreping boven en onder de link:
a:hover { text-decoration: underline overline }
Geen onderstreping:
a:hover { text-decoration: none }
Hoe je van kleur of wel of niet onderstreept kunt veranderen heb ik hierboven al laten zien.
- Voorbeeld verandering van lettertype:
Ander lettertype
- Voorbeeld verandering van lettertype-grootte:
Font size
Vooral met het laatste voorbeeld zou ik voorzichtig zijn. Doordat het lettertype van klein naar groot verandert kan de opmaak verstoord raken.
* * *
Dan nog een link-kenmerk dat ik zelf erg leuk vind: 'highlighting' oftewel het markeren van tekst.
- Voorbeeld:
Texturizer Filter tutorial
De code voor dit effect is:
a:hover { color: black; text-decoration: none; background: lime }
* * *
Een variatie hierop:
Super Blade Pro tutorial
De code voor de glitter-achtergrond:
a:hover { background-image: url(spark_05_hhdk.gif); color: #000080; background-color: #cfe1eb; text-decoration: none }
Voor dit effect heb je een glitter-gifje nodig. Ik heb verschillende kleuren glitter-gifjes gezipt die je hier kunt downloaden.
Maar ... en nu komen we op het punt waar ik wezen wil, Microsoft Internet Explorer ondersteunt alleen maar de :hover pseudoclass <a>nchor (= hyperlink). Andere browsers zoals bijvoorbeeld Mozilla hebben geen moeite met de hover-opdracht. Die beperken zich niet - zoals IE - tot hyperlinks. Die kunnen rustig met andere HTML-elementen overweg zoals b.v. <h2> of <ul>.
Natuurlijk zijn er altijd mensen die het een uitdaging vinden om dit gebrek in IE op te lossen. Peter Nederlof en Sjaak Priester hebben een script geschreven waardoor je met de IE meer hover-mogelijkheden krijgt. Ik heb het script hover.htc van Sjaak Priester gedownload. Dit htc-bestand en een stukje script in de style tags doet wonderen voor IE. Kijk maar hieronder:
- Als je je muis over dit stukje tekst beweegt, zie je een lila achtergrond met paarse tekst.
- Gecreëerd volgens een ongeordende opsommingslijst.
- Dit is - in IE - alleen maar mogelijk met het bestand 'hover.htc'.
- Voor deze alinea heb ik in de style tags de volgende code gezet:
Zie ook deel 2 en deel 3.
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal