Cufon h2 на div hover

Question

У меня есть теги h2 внутри div, которые мне нужно изменить при наведении на 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, чтобы вы увидели, что изменение цвета h2 работает, когда вы наводите курсор на элемент .bx1, нажмите «включить cufon», чтобы увидеть его с Cufon.

Answer 1

Вам не нужно использовать jquery.Вы просто не правильно установили цвет.Попробуйте это:

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

Используя настройку ховерабелей, вы сможете добавить эффект наведения на столько элементов, сколько вам нужно.

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