I am really frustrated right now because I can't seem to get Cufon working properly. I have a span link with text inside it, and I want the font color to change when hovered over.
Cufon.replace('.info-grid a span', { fontFamily: 'Vegur', hover: true, color: 'white', hoverables: { a: true, span: true } });
Despite the code above, the font is always white when the site loads. I suspect it's because the hover state isn't being set correctly. I've tried setting the .info-grid a:hover span class but it doesn't seem to be working.
This is how my CSS looks...
.info-grid a span {
position: relative;
left: 10px;
top: 80px;
font-size: 0.94em;
line-height: 1.3em;
font-weight: bold;
text-transform: uppercase;
color: #009FD4;
background-color: #ffffff;
}
.info-grid a:hover span {
color: #fff;
background-color: #009FD4;
}
And here is a snippet of my HTML...
<div class="info-panel" id="info-firstteam">
<h3>First Team</h3>
<div class="info-grid">
<div>
<a href="../players/profiles/1.html" class="pic-no1">
<p id="nametext"><span id="firstline">James</span><br><span id="secondline">Tillotson</span></p>
</a>
</div>
<div>
...additional divs for players
</div>
</div>