Change color of h1 on div hover

[Peter Horvath]

I'm trying to change the color of text when I hover over a div.

Here's what I'm trying right now which doesn't work.

//js
Cufon.replace('.overlay a h1', {hover: true});

//css
.overlay a h1 { color: #ffffff; }
.overlay:hover a h1 { color: #0fb4d7; }

//markup
<div class="overlay">
<a href="#"><h1>Title</h1></a>
</div>

[Gareth Evans]

Hi Peter

 

When you asign your :hover psuedo, you should assign it to the anchor, not the div

You should also target the anchor, not the h1 with your Cufon.replace

 

Like this:

//js
Cufon.replace('.overlay a h1', {hover: true});

//css
.overlay a h1 { color: #ffffff; }

.overlay a:hover h1 { color: #0fb4d7; }

//markup
<div class="overlay">
<a href="#"><h1>Title</h1></a>
</div>

 

Cufon only supports hover on anchor tags.

 

If you want the hover to apply to the div, then use this:

 

Cufon.replace('.overlay a', {
hover: true,
hoverables: { div: true }
});

 

But I don't recommend this.

 

See here for more detail:

http://wiki.github.com/sorccu/cufon/styling

 

Gareth

On Fri, Jan 15, 2010 at 5:07 AM, Peter Horvath <peter...@gmail.com> wrote:

I'm trying to change the color of text when I hover over a div.

Here's what I'm trying right now which doesn't work.

//js

Cufon.replace('.overlay a', {hover: true});

//css
.overlay a h1 { color: #ffffff; }
.overlay:hover a h1 { color: #0fb4d7; }

//markup
<div class="overlay">
<a href="#"><h1>Title</h1></a>
</div>

--
You received this message because you are subscribed to the Google Groups "cufón" group.
To post to this group, send email to cu...@googlegroups.com.
To unsubscribe from this group, send email to cufon+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cufon?hl=en.

[Gareth Evans]

Err.. like this: (i'm sure I changed that)

 

//js
Cufon.replace('.overlay a', {hover: true});
//css
.overlay a h1 { color: #ffffff; }

.overlay a:hover h1 { color: #0fb4d7; }
//markup
<div class="overlay">
<a href="#"><h1>Title</h1></a>
</div>