Cufon h2 su div hover

Question

Ho tag H2 all'interno div che ho bisogno di cambiare colore a div hover, se il Cufon è spento, il tag h2 cambia bel colore, ma quando Cufon è acceso, non cambia colore. Ecco il mio codice:

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; 
}

Codice

<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>

Esempio URL: http://dev.splished.360southclients.com/test.php In questo test ho Cufon disabile per voi a vedere che il cambiamento di colore h2 funziona quando si passa sopra il div .bx1, fare clic su "svolta Cufon on" per vedere con la Cufon.

Answer 1

Sono riuscito a farlo funzionare utilizzando jQuery, ecco quello che ho fatto per risolvere questo problema, se qualcun altro sta avendo questo problema:

  /* 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

Non c'è bisogno di utilizzare jQuery. Non ci si stavano mettendo correttamente il colore. Prova questo:

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

Utilizzando impostazione sarà in grado di aggiungere l'effetto hover al maggior numero di elementi a piacere i hoverables.