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?