css - Cufon h2 在 div 上悬停

Question

我在 div 中有 h2 标签，我需要在 div 悬停时更改颜色，如果关闭 cufon，h2 标签会很好地改变颜色，但是当打开 cufon 时，它不会改变颜色。这是我的代码:

库丰

Cufon.set('fontFamily', 'DIN');
Cufon.replace('.listing_04 li a .bx1 .right .head_bx h2', {
  hover: true,
  hoverables: { a: true, div: true }
});

CSS

.listing_04 li a .bx1 .right .head_bx h2 {
    color: #e91397;
    font-size: 16px;
    padding: 0px;
    margin: 0px;    
}
.listing_04 li a:hover .bx1 .right .head_bx h2 {
    color: #ffff00; 
}

代码

<div class="listing_04">
  <ul>
    <li> <a href="#">
      <div class="bx1">
        <div class="left"> <img src="images/friends_only.jpg" alt="" border="0" class="img_border01" />
          <div class="staring_bx"> <img src="images/star1.png" border="0" /> <img src="images/star1.png" border="0" /> <img src="images/star1.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /></div>
        </div>
        <div class="right">
          <div class="head_bx">
            <h2><strong>The Party Girls</strong></h2>
            My Favourites</div>
          <p> By : <b>Modi</b><br />
            19 Jan 2010 @ 20:20<br />
            Views : <strong>1542484</strong><br />
            Comments : <strong>84 </strong></p>
        </div>
        <div class="clear"></div>
      </div>
      </a> </li>
    <li> <a href="#">
      <div class="bx1">
        <div class="left"> <img src="images/img_07.jpg" alt="" border="0" class="img_border01" />
          <div class="staring_bx"> <img src="images/star1.png" border="0" /> <img src="images/star1.png" border="0" /> <img src="images/star1.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /></div>
        </div>
        <div class="right">
          <div class="head_bx">
            <h2><strong>The Party Girls</strong></h2>
            My Favourites</div>
          <p> By : <b>Modi</b><br />
            19 Jan 2010 @ 20:20<br />
            Views : <strong>1542484</strong><br />
            Comments : <strong>84 </strong></p>
        </div>
        <div class="clear"></div>
      </div>
      </a> </li>
    <li> <a href="#">
      <div class="bx1">
        <div class="left"> <img src="images/resticted_image.jpg" alt="" border="0" class="img_border01" />
          <div class="staring_bx"> <img src="images/star1.png" border="0" /> <img src="images/star1.png" border="0" /> <img src="images/star1.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /></div>
        </div>
        <div class="right">
          <div class="head_bx">
            <h2><strong>The Party Girls</strong></h2>
            My Favourites</div>
          <p> By : <b>Modi</b><br />
            19 Jan 2010 @ 20:20<br />
            Views : <strong>1542484</strong><br />
            Comments : <strong>84 </strong></p>
        </div>
        <div class="clear"></div>
      </div>
      </a> </li>
  </ul>
  <div class="clear"></div>
</div>

示例网址:http://dev.splished.360southclients.com/test.php在此测试中，我已禁用 cufon，以便您在将鼠标悬停在 .bx1 div 上时看到 h2 颜色变化起作用，单击“打开 cufon”以使用 cufon 查看它。

Answer 1

您不需要使用 jquery。你只是没有正确设置颜色。试试这个:

Cufon.replace('.listing_04 li a .bx1 .right .head_bx h2', {
  hover: {
     color: 'yellow'
  },
  hoverables: { a: true, div: true }
});

通过使用 hoverables 设置，您可以将悬停效果添加到任意数量的元素。