Cufon h2 on div hover - css

Question

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.

Answer 1

You don't need to use jquery. You just weren't properly setting the color. Try this:
Cufon.replace('.listing_04 li a .bx1 .right .head_bx h2', {
hover: {
color: 'yellow'
},
hoverables: { a: true, div: true }
});
By using the hoverables setting you will be able to add the hover effect to as many elements as you like.

Answer 2

I managed to get it working using jQuery, here is what I have done to fix this issue, if anyone else is having this problem:
/* 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'
});
});