javascript - Cufon 与悬停混淆

Question

我现在正在拔头发，因为 Cufon 要么在玩，要么我想得太复杂了。我有一个 span 链接类，其中包含其中的文本。 a span 内的字体颜色应在悬停状态下发生变化。

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

使用上面的代码，当你打开网站时，字体是白色的。我假设这是因为上面的代码实际上并没有设置悬停状态，但我该如何设置呢？我尝试设置 .info-grid a:hover span 类，但没有成功。

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

您可能想要设置 color作为 :hover 的一部分造型对不对？在那种情况下，您应该将此规则放在 hover 中属性(property)，像这样:

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

在documentation中说, 然而...

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

...在我看来，您的情况应该考虑到此通知。所以也许最好依赖 :hover a的状态|仅用于更改颜色，用此替换代码:

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

...作为<a>默认情况下，元素是“可悬停的”。