Cufon h2 on div hover
- by SoulieBaby
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.
