Cufon Hover问题

时间:2012-03-31 21:52:10

标签: html html5 cufon

我在为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>

2 个答案:

答案 0 :(得分:0)

据我所知,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>

那会起作用;)

答案 1 :(得分:0)

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

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

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