cufon hover state sticking

right off the bat i just want to pre-thank anyone who chimes in. stackoverflow makes me feel a little better about humanity.

PROBLEM: I have a 'single-page' site where the main content reloads via ajax but the nav and footer stay the same. I am using Cufon fonts for the nav and Jquery to attach a class "current" to the current link. For some reason the hover state is sticking even after the current class is removed and added to another link.

HTML: <nav id="banner"><ul><li><a>1</a></li><li><a>2</a></li></ul></nav>

CUFON: Cufon.replace('#banner a',{fontFamily: 'Gotham-Book', fontStyle: 'normal', hover: true});

CLICK FUNCTION: $("nav").delegate("a", "click", function() { window.location.hash = $(this).attr("href"); $("#banner nav a.current").removeClass("current"); $(this).addClass("current"); return false; });

CSS: #banner {color: #000;} #banner a:hover {color: #be1e2c;} #banner nav ul li a.current {color: #be1e2c;}开发者_运维知识库

In your click function after $(this).addClass("current"); add Cufon.refresh(); This call is needed every time you make a change to Cufon text.