移动Safari链接保留焦点触摸之后(mobile safari links retains foc

我的导航是很简单的。我有增加了一个边界和一个透明的渐变PNG背景一些文本，一个附加的类，当由jQuery的加入，增加了颜色透明图像后面的悬停状态。

如果您单击切换在Web浏览器类，你会看到的颜色进来了，但背景图像保持如果你从来没有移动鼠标从按钮离开。这是预期行为。

我的问题是使用iPad时，触摸似乎保持悬停状态和：直到按下另一个键悬停属性添加到该按钮：除非你点击另一个按钮，在这种情况下，持续徘徊性质永远不会消失。

我无法想象，我是第一个这样的问题，但搜索没有打开任何东西。

救命？

正常 - 飞翔 - 活动（通过addClass（））

Answer 1:

哈弗是设计有一个指针没有这么多触摸事件的工作一个CSS伪类。通常，你会希望避免使用悬停完全因为它使移动没有任何意义。一个对付这种最简单的方法是把你的悬停CSS媒体查询中。您可以通过定位片或桌面屏幕做到这一点，这里有两种解决方案：

1-定位的iPad：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2-定位台式机：

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

无论哪种方式是有效的。如果您发现该CSS在特定装置触发的错误，您可以更改最小和最大宽度值。

Answer 2:

如果您使用Modernizr的，非触摸类将被添加到根html元素对于非触摸设备。然后，你可以这样做：

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}

Answer 3:

这是我如何修复它为我的清单，悬停：

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

而对于背部布通导航悬停修复...

<body onunload="$('a').blur();">

要么

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

对于新手来说，卸载事件发生时，浏览器离开页面右侧前。通过模糊所有在卸载该页面的链接，我能未粘悬停状态。返回使用返回按钮原始页面显示在默认状态下，点击的链接。

不幸的是，一个onclick事件似乎并没有引发卸载，但在iOS 5中的刷新呢？

停留在：悬停- http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/使用jQuery来代替- http://www.nerdboy.co.uk/2009/01/使用-的jQuery更换的，身体onunload的/

Answer 4:

我碰到这个问题跑了为好。我的问题是在iPad上，如果我拍了拍锚和轻微滚动，单击事件不火，但该元素将保留悬停状态CSS。我的信念是，iPad的竟是保持聚焦状态并应用在：hover CSS样式，努力将模拟桌面体验。

非JS和实用的解决方法是不提供hover样式触摸设备，如果没有需要他们。触摸设备没有“真正的”悬停状态，但它似乎悬停当一个元素集中或抽头和滚动在模拟。

因此，与Modernizr.js装，我提出我的hover样式到。没有触摸的范围-

即

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

然后，当元素被点击，我就可以触发一个活动类。

.my-element.active {
  /* active styles */
}

唯一的负面外卖是你没有得到一个“被挖掘出来的状态”。我还没有探讨一个解决方案，因为它不是我的应用程序非常重要。

Answer 5:

你需要抓住以下事件

touchstart - 当你的手指触摸屏幕

touchend - 当你的手指离开屏幕

认为的悬停和unhover，如果你能发布一些代码，我们可以帮助你更多，如果你不明白我在说什么

$('element').on('touchstart', function(){
    // apply hover styles, or better yet addClass() of hover styles
});

$('element').on('touchend', function(){
    // removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});

给出一些示例代码中，touchstart和最终应该解决的问题

Answer 6:

这是一种解决方法：

var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);

文章来源: mobile safari links retains focus after touch