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.
