CODEWITHSUNDEEP
htmlcsshovercufon
Luuk
Luuk

Reputation: 1999

Cufon hover stays in hoverstate on mouseout

http://www.basenharald.nl/3d

Hover the buttons. What i want is that the cufon text changes to #e90c00. For some reason (sometimes) when i move my mouse off the button it stays #e90c00.

This is the code that i use:

Cufon.replace('#nav li a span', {  hover: true, hoverables: { span: true}, textShadow: '#353535 1px 1px'} );

Does anyone know how i can fix this?

Upvotes: 1

Views: 3031

Answers (7)

prochevnik
prochevnik

Reputation: 11

I came to this post looking for troubleshooting the cufon hover problem with submenu's. I was impressed with the answers and tried the reset to no avail. The following article from the cufon FAQ may help others looking for something similar:

https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10

Upvotes: 1

Dennis de Roo
Dennis de Roo

Reputation: 1

Shorter snippet:

$('ul#nav ul li a').mouseout(function(){ Cufon.refresh('ul#nav ul li a'); });

Upvotes: 0

guylabbe.ca
guylabbe.ca

Reputation: 891

The jQuery script that some users have suggested is in fact the only way to get it to work properly. The Cufon styling effects that are explained in Cufon's documentation do work, but sometimes the hover effect will still display after you moved the mouse out of the button area. Which is, of course, a shame. You need at least to insert a Cufon.refresh() or Cufon.replace() after the hover is triggered. You can keep the styling with CSS, no need to implement that in the JS snippet. Here is the code I use for that case :

$('ul#nav ul li a').hover(function(){ 
    Cufon.refresh('ul#nav ul li a'); 
 },function(){ 
    Cufon.refresh('ul#nav ul li a'); 
});

With CSS, of course, something like that :

ul#nav li a { color: black } ul #nav li a:hover { color :red }

Upvotes: 0

Luuk
Luuk

Reputation: 1999

Solved the issue:

$('#nav li').hover(function(){ 
    $('a span', this).css('color','#e90c00'); 
    Cufon.refresh('#nav li a span'); 

 },function(){ // this is the mouse out 

    $('a span', this).css('color','#fff'); 
    Cufon.refresh('#nav li a span'); 
});

Upvotes: 0

Shalom Sam
Shalom Sam

Reputation: 1559

why not use CSS??

#nav li a span
{
  color: #fff;
/* and other default styles */
}
#nav li a span:hover
{
  color: #e90c00;
/* and whatever other styling u need on hover */
}

Upvotes: 0

marissajmc
marissajmc

Reputation: 2603

You need to call Cufon.refresh(); eg:

$('#nav li a span').hover(function(){
    $(this).css('color','#e90c00');
    Cufon.refresh($(this));
// this is the mouse out
},function(){
    $(this).css('color','#fff');
    Cufon.refresh($(this));
});

Upvotes: 0

user838921
user838921

Reputation:

Check this out: https://github.com/sorccu/cufon/wiki/styling

some tests you can try 

Cufon.replace('#nav li a span', {
hover: true,
hoverables: { span: true, a: true }
});


Cufon('#nav li a span', {
color: '#fff',
hover: {
    color: '#e90c00'
       }
});

Upvotes: 0

Related Questions