I am in the process of developing a unique framework specifically designed for WebKit devices. One of the features I have implemented is a series of list views that activate a 'hover' class when users touch them. Below is the jQuery/JavaScript code I am using to achieve this effect, as well as the corresponding CSS styles:
$('*').bind('touchstart', function() { $(this).addClass('hover'); }).bind('touchend', function() { $(this).removeClass('hover') });
Here is the associated 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
}
While this setup works smoothly on desktop browsers like Chrome, there seems to be an issue with iPhone's Mobile Safari. Even when I tap once on an element within the List Views, the next list item becomes hovered without any additional interaction. This behavior is not ideal from a user experience standpoint.
If anyone can provide insights on debugging this problem or why it occurs specifically on Mobile WebKit, it would be greatly appreciated. I've attempted adding some code to address the issue, but so far, no success:
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');
}
Thank you in advance for any assistance, and apologies for the lengthy explanation!