Question

我在为cufon制作渐变颜色时遇到麻烦（悬停时）。它适用于（非悬停），但（悬停）它不会改变渐变颜色。如果有人能帮助我，我将不胜感激？

Cufon部分：

    Cufon.replace('h1', {
    color: '-linear-gradient(white, black)',
    fontFamily: 'Scriptina',
    textShadow: '1px 1px rgba(0, 0, 0, 0.2)'
});
Cufon.replace('#nav a', {
    hover: true
});
Cufon('#content h2', {
    color: '-linear-gradient(#b7dded, 0.2=#70ceef, 0.5=#20b4e2, #b1dbeb)',
    hover: {
        textShadow: '2px 2px red',
        color: '-linear-gradient(black, white)'
    }
});

来自HTML：

     <nav class="mid">
      <ul class="tabs">
           <li>
                <a href="#" class="defaulttab" rel="tabs1">
                     <div class="lineRight">
                          <h5>TEXT 1</h5>
                          <p>Sub-Text1</p>
                     </div>
                </a>
           </li>
           <li>
                <a href="#" rel="tabs2">
                     <div class="lineMiddle">
                          <h5>TEXT 2</h5>
                          <p>Sub-Text2</p>
                     </div>
                </a>
           </li>
           <li>
                <a href="#" rel="tabs3">
                     <div class="lineMiddle ook">
                          <h5>TEXT 3</h5>
                          <p>Sub-Text3</p>
                     </div>
                </a>
           </li>
           <li>
                <a href="#" rel="tabs4">
                     <div class="lineLeft">
                          <h5>TEXT 4</h5>
                          <p>Sub-Text4</p>
                     </div>
                </a>
           </li>
      </ul>
 </nav>

Answer 1

据我所知，cufon hover仅适用于链接。你可以使用这样的东西

Cufon.replace('h1', { fontFamily: 'yourfont' });
Cufon('#yourid a', {
hover: {
color: 'green'
}
});

你的HTML看起来像这样

<a href="#">
<h5>h5 text</h5>
<p>some text</p>
</a>

那会起作用;）

Answer 2

从我从规范中收集的内容（https://github.com/sorccu/cufon/wiki/Styling），您需要明确启用悬停：

Cufon.replace('h1', {
    hover: true
});

话虽如此，为什么不使用@font-face？

Cufon Hover问题

2 个答案: