Cufon H2的div懸停

Question

我有h2標籤裏面的div我需要改變div懸停的顏色，如果cufon關閉，h2標籤改變顏色很好，但是當cufon打開時，它不會改變顏色。這裏是我的代碼：

的Cufón

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在這個測試中我已禁用的Cufón給你看的當您將鼠標懸停在.bx1 div上時，h2顏色變化起作用，單擊「打開cufon」以查看cufon。

Answer 1

我設法它的工作使用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'    
    }); 
    }); 

Answer 2

你並不需要使用jquery。你只是沒有適當地設置顏色。試試這個：

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

通過使用hoverables設置，您將能夠將懸停效果添加到儘可能多的元素，只要你喜歡。