Cufon mouse-over

Question

I have some HTML like this:

<div class="button2" onclick="">
 <div class="button_text">LOCATE STORES</div>
 <div class="button_arrow"></div>
</div>

I use this code for Cufon:

Cufon.replace('div.button2', { fontFamily: 'Bliss2H', hover: true, fontSize: '12px' });

My CSS:

div.button2 {
  color: #d79645;
}
div.button2:hover {
  color: white!important;
}

Cufon works, however the text color does not change on mouse-over.

score 2 · Answer 1 · answered Feb 10 '11 at 11:54

2

For performance reasons :hover is not enabled by default, which means that you’ll have to enable it separately for elements that need it. You can do this with:

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

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

answered Feb 10 '11 at 11:54

Sjoerd

74,049
16
131
175

Bu I already did. Please check this line again: Cufon.replace('div.button2', { fontFamily: 'Bliss2H', hover: true, fontSize: '12px' }); – Martin Feb 10 '11 at 12:40

score 0 · Accepted Answer · answered Feb 14 '11 at 05:18

0

Your buttons are links? This is the CSS for what I've got going on this page: http://ianmartinphotography.com/test-site/

My cufon buttons are at bottom.

h3  {color: #79868e; font-family: helvetica; font-size: 21px; margin:5px 0 0 0; } 
a:link    {color: #555055; text-decoration: none; outline:none;}
a:visited {color: #555055; text-decoration: none; outline:none;}
a:hover   {color: #79868e; text-decoration: none; outline:none;}

<div id="about"><h3><a href="about">about</a></h3></div>

answered Feb 14 '11 at 05:18

ian_6500

358
2
10
21

Yes, it seems to work when I use HTML like this:
LOCATE STORES

However can I avoid using ? – Martin Feb 15 '11 at 13:16
Hi Martin, If your buttons are links, why would you want to avoid the anchor tag? http://www.w3schools.com/tags/tag_a.asp – ian_6500 Feb 15 '11 at 16:01
Do you have a test page that I can see to see your code in context? What would you like your buttons to do if they're not links? – ian_6500 Feb 15 '11 at 16:09
I dont use the tag because it does not validate with a nested h3 tag. I use onclick on the button. I dont have a testpage you can access. It's only accessable with VPN – Martin Feb 18 '11 at 13:49
1

If anyone else wants the solution, i changed my HTML to: Button text – Martin Feb 18 '11 at 14:10
Hi Martin, I've used
about
on my page http://ianmartinphotography.com/test-site/ and the page is passing W3C HTML validation. Is there something else that might be causing the code not to validate? My Doctype is XHTML 1.0 Transitional. Thanks for the green check by the way! – ian_6500 Feb 18 '11 at 15:26

score 0 · Answer 3 · answered Feb 14 '11 at 05:35

0

Have you tried #FFFFFF instead of white?

Couldn't you simply have: div.button2:hover {color: #FFFFFF;}

And not have !important?

answered Feb 14 '11 at 05:35

ian_6500

358
2
10
21

I just tried with #ffffff and without !important. This is my new CSS. But it still doesnt work: div.button2 { color: #d79645; } div.button2:hover { color: #ffffff; } – Martin Feb 15 '11 at 13:11

Cufon mouse-over

3 Answers3

about