0

我目前正在开发一个用于 WebKit 设备的私有框架。我创建了一系列列表视图，我在其中应用了一个hover用户何时开始触摸某物的类。这是我用来添加它的 jQuery / JavaScript 代码，以及匹配类的 CSS：

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

和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
     }

在 Chrome（或某些支持 Webkit 的桌面浏览器）中查看时，这似乎按预期工作，除了如果鼠标位置在屏幕转换之间不移动，新屏幕上的列表元素将悬停。这显然是意料之中的，因为:hover伪类已被解雇。

但是，我没想到 iPhone 的 Mobile Safari 也会发生同样的行为。以下是一些截图和场景的简要说明。我在 List Views 元素（它是一个位于 中的a元素li）上点击一次，然后将手指从屏幕上移开。显示一个新div的包含另一个列表。没有点击div现在显示的新的任何东西，第二个li有一个类hover，即使我没有碰过它......

在此处输入图像描述 在此处输入图像描述

谁能帮我调试一下，或者弄清楚为什么在 Mobile WebKit 上会发生这种情况？这很烦人，因为它的 HCI 很差。我尝试添加以下行来纠正问题，但没有喜悦：

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');
}

高级感谢您的帮助，很抱歉漫无目的！

4

1 回答 1

1

试试这个

$('body').bind('touchend',function(){
     $('#p-promotion-main .e-container.hover').removeClass('hover');
});
于 2012-06-14T02:35:54.987 回答