Leestijd: 2 minuten | Gepubliceerd: 12 februari 2012

De echte Cufon Hover met color techniek

We komen graag altijd terug op oude artikelen, zoals de vergelijking van sIFR, Cufon en @FontFace. Cufon is nog steeds een goede optie omdat deze de fonts er het beste uit laat zien in de meeste browser. Maar hoe krijg je toch die verrekte :hover statussen geïntegreerd. Als je bekend bent met Cufon.replace, dan weet je maar al te goed dat als je een menu styled, dat je altijd 30 minuten extra bezig bent om de hover kleur mee te krijgen. Als je Cufon gebruikt dan wordt de tekst omgezet naarelementen en werkt de a:hover CSS functie niet meer. Als het menu een andere kleur kreeg bij mouseover/hover, dan moet je dit in Cufon ook nog eens extra specificeren. Na vele mislukte pogingen (bij elke site opnieuw) is het altijd zoeken naar de juiste code om die hover op te zetten.

De volgende voorbeelden die je al snel vind op het web geven voor ons 9 van de 10 keer niet het gewenste resultaat:

Cufon.replace('element', {hover: true}); Cufon.replace('element', {hover: 'true'}); Cufon.replace('element', { hover: true, color: 'Orange' });

De oplossing voor Cufon Hover

Deze code heeft ons altijd geholpen en is voor nu verzegeld in het Webcreationz Blog. ‘Element’ staat voor het element dat een hover krijgt, vaak is dat een link en niet de list-item. De hover dient dus op het link item, de a, gegeven te worden.

Cufon.replace('.menu li a', { hover: { color: '#FF7200' } });

Hebben jullie nog andere leuke tips met betrekking tot Cufon?

Bas ten Broeke
Wij zijn er voor al jouw vragen

Neem contact op als je vragen hebt over het blogartikel of als je een bijzonder project hebt waarbij onze expertise van pas kan komen. Wij staan klaar om je verder te helpen!

    verplicht
    verplicht
    verplicht