Cufon h2 on div hover

Posted by SoulieBaby on Stack Overflow See other posts from Stack Overflow or by SoulieBaby
Published on 2010-06-09T00:06:41Z Indexed on 2010/06/09 0:12 UTC
Read the original article Hit count: 455

Filed under:
|

Hi all, I have h2 tags inside divs which I need to change colour on div hover, if the cufon is turned off, the h2 tag changes colour fine, but when cufon is turned on, it doesn't change colour. Here's my code:

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

Code

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

Example URL: http://dev.splished.360southclients.com/test.php In this test I've disabled cufon for you to see that the h2 colour change works when you hover over the .bx1 div, click "turn cufon on" to see it with the cufon.

© Stack Overflow or respective owner

Related posts about hover

Related posts about cufon