div悬停时的Cufon h2

Question

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

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>

示例 URL：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 设置，您可以为任意数量的元素添加悬停效果。

Answer 2

我设法使用 jQuery 使其正常工作，如果其他人遇到此问题，这是我为解决此问题所做的工作：

  /* jQuery and Cufon for div hover */
  $(".bx1").hover(function() { //handlerIn
    //change the colour
    var h2 = jQuery(this).find("h2");
    Cufon.replace(h2, {
      color: '#ffff00'            
    });
  }, function() {  //handlerOut
    //revert the colour
    var h2 = jQuery(this).find("h2");
    Cufon.replace(h2, {
      color: '#e91397'            
    });
  });