cufon hover stays in hover state after mouse out.

Question

I believe this might be one of the most common problem that users faces when they uses hover in cufon. Furthermore, there might be tons of solutions, but I have tried to no avail. Please help me. the website that I am having trouble with is [[here]]

jQuery(document).ready(function(){
   jQuery('.menubar a').hover(function(){ 
       jQuery('menubar a').css('color','#000000'); 
       Cufon.refresh('menubar a'); 

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

       jQuery('menubar a').css('color','#707070'); 
       Cufon.refresh('menubar a'); 
   }); 
});

I have also tried several attempt of refreshing the cufon using Cufon.refresh(). The hover still doesnt work. is there another solution or am I missing out something?

Answer 1

You're selecting every .menubar a instead of only the one that was hovered. Try this: ^{(pun intended)}

jQuery(document).ready(function(){
   jQuery('.menubar a').hover(function(){ 
       jQuery(this).css('color','#000000'); 
       Cufon.refresh(this); 
    },function(){ // this is the mouse out 
       jQuery(this).css('color','#707070'); 
       Cufon.refresh(this); 
   }); 
});

Not only that, several of your selectors are menubar a when they should be .menubar a ^{(note the .)}.