mobile safari links retains focus after touch

Question

My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by

Answer 1

This is how I fixed it for my list with a hover:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

And a fix for hover on back buton navigation...

or

$(window).unload( function () { $('a').blur(); } );

For the unini­ti­ated, the unload event occurs right before the browser leaves the page. By blur­ring all of the links in the page on unload, I was able to un-stick the hover state. Returning to the orig­inal page using the back button shows the clicked link in the default state.

Unfortunately, an onclick event doesn't seem to trigger the unload, but a refresh does in iOS 5?!

Stuck On :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ Use jQuery to replace - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/