Cufon confusion with hover

Question

I am pulling my hair out currently, because Cufon is either playing up, or I'm thinking too complicated. I have a span link class, which includes text inside it. The colour of the font inside the a span should change on hover state.

Cufon.replace('.info-grid a span', { fontFamily: 'Vegur', hover: true, color: 'white', hoverables: { a: true, span: true } });

With the above code, when you open the site, the font is white. I assume it's because the above code doesn't actually set the hover state, but how can I set it? I tried setting .info-grid a:hover span class but it didn't work.

CSS...

.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;
}

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>

Answer 1

You probably wanted to setup color as part of :hover styling, right? In that case you should put this rule inside hover property, like this:

Cufon.replace('.info-grid a span', { 
  fontFamily: 'Vegur', 
  hover: {
    color: 'white'
  },
  hoverables: { a: true, span: true } 
});

It's said in the documentation, however...

Nesting :hover-enabled elements is unrecommended and may lead to unpredictable results.

... and the way I see it, this notice should be accounted in your case. So maybe it's best to depend on :hover state of a only for changing the colors, replacing the code with this:

Cufon.replace('.info-grid a', { 
  fontFamily: 'Vegur', 
  hover: {
    color: 'white'
  }
});

... as <a> elements are 'hoverable' by default.