Question

I am currently developing a private framework for use on WebKit devices. I have created a series of list views, to which I am applying a class of hover when the user touchstarts on something. Here’s the jQuery / JavaScript code that I am using to add this, and the CSS to matched class:

    $('*').bind('touchstart', function() { $(this).addClass('hover'); }).bind('touchend', function() { $(this).removeClass('hover') });

And the CSS:

 ul li:hover,
 ul li.hover {
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,140,245,1)), color-stop(100%,rgba(1,96,230,1)));
     background: -webkit-linear-gradient(top, rgba(5,140,245,1) 0%,rgba(1,96,230,1) 100%);
     color: #fff
 }       
     ul li:hover a,
     ul li.hover a {
         background-position: right -38px
     }

This seems to work as expected when viewing in Chrome (or some desktop Webkit-enabled Browser), except for the fact that if the mouse position doesn’t move between transitions of screens, the list element on the new screens becomes hovered. This is obviously to be expected, since the :hover pseudo-class has been fired.

However, I didn’t expect the same behaviour to occur in iPhone’s Mobile Safari. Here are some screenshots and a brief explanation of the scenario. I tap once on the List Views element (which is an a element inside an li) and remove my finger from the screen. A new div is shown containing another list. Without tapping anything on the new div which is now displayed, the second li has a class of hover, even though I haven’t touched it…

Can anyone help me debug this, or work out why this is happening on Mobile WebKit? It’s very annoying, as it’s poor HCI. I tried adding the following line to rectify the issue, but no joy:

if(window.location.hash)
{
    var the_hash = window.location.hash.substring(1);
    if($('#' + the_hash).length > 0)
    {
        $('.current').removeClass('current');
        $('#' + the_hash).find('*').removeClass('hover');
        $('#' + the_hash).addClass('current');
    }
}
else
{
    $('div').eq(0).addClass('current');
} 

Advanced thanks for any help, and sorry to ramble!

Answer 1

try this

$('body').bind('touchend',function(){
     $('#p-promotion-main .e-container.hover').removeClass('hover');
});