jquery hover menu and back button

Question

I have this code, but when I click the back button in the browser the menu is still visible and it's class still is 'show'

$("#courses > a,#masterclasses > a,#the-team > a").click(function (e) {                                                            
    e.preventDefault();
});
$('#courses > a,#courses-nav').hover(function(){
    $('#courses-nav').addClass('show');
    $('#courses > a').css('color','#43b2b0');
},function(){
    $('#courses-nav').removeClass('show');
    if ($('body').hasClass('courses')) {
        $('#courses > a').css('color','#43b2b0');
        }
        else {
        $('#courses > a').css('color','#000');
    }
}); 

I have tried adding this... $('#courses-nav,#masterclasses-nav,#the-team-nav').removeClass('show'); ...but that doesn't fix the problem.

Thanks for any help in fixing this issue.

C

Answer 1

Yeah, when you use the back and forward buttons, today's browsers don't actually reload the page. Instead, they keep the old page in existence, hide it when leaving, and re-show it when re-entering the page. This results in much faster back/forward navigation, and means that the page will be in the exact same state when you go back to it as it was when you left it. About the bfcache in Firefox.

You can catch the pageshow event and use it to cancel intermediate operations without going so far as to break the bfcache completely (which is usually done by adding an unload event handler).

For hovers you may be better off using normal CSS :hover rather than scripting. It's only IE6 this doesn't work with. There again, hover-menus have quite tricky usability and accessibility problems whether done with script or CSS.