1

Cufonが遊んでいるか、複雑すぎると思っているので、現在髪を抜いています。スパンリンククラスがあり、その中にテキストが含まれています。スパン内のフォントの色は、ホバー状態で変化するはずです。

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>
4

1 に答える 1

0

あなたはおそらくスタイリングcolorの一部としてセットアップしたかったでしょう？:hoverその場合、次hoverのように、このルールをプロパティ内に配置する必要があります。

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

ドキュメントに記載されていますが...

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>要素はデフォルトで「ホバー可能」であるため。

于 2012-12-27T16:48:49.357 に答える