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开发者_StackOverflow, 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.
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
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>
Have you tried #FFFFFF instead of white?
Couldn't you simply have: div.button2:hover {color: #FFFFFF;}
And not have !important?
精彩评论