iOS需要双击一个简单的链接元素
如果您点击iOS上的某个元素，浏览器将触发mouseover/mousemove事件并呈现:hover样式。 如果在此过程中检测到“内容更改”，则不会触发点击事件，您必须再次点击才能触发点击事件。 这在developer.apple.com上有logging。
即使没有应用鼠标事件或:hover样式，我在网页上也遇到了“内容更改”的问题。 这花了一段时间，但我能够将网页缩减为一个小的testing用例：
<style> a:hover { color: red } foo + * { color: red } </style> <a href="about:blank">foo</a> <input type="search">
在这个页面上，你必须在“foo”链接点击两次来浏览。 testingiPad mini和iPhone（本机和模拟器）。
之后，我发现这个博客文章有类似的问题 。 但唯一的解决scheme适用于我的问题是下面的CSS：
input[type=search]::-webkit-search-cancel-button { display: none; }
但是，如果我想让search取消button可见，则无法使用此解决方法。
这个问题还有其他解决方法吗？
我前几天在bugreport.apple.com上发布了这个bug，直到现在还没有苹果的反应。 这个错误似乎是在iOS 6和7中，如果有一天它会被修复，那将会很好。
我如何知道这是一个webkit还是一个iOS的bug？
哪里是报告这个错误的正确的地方？
UPDATE
这个错误似乎在iOS 8中得到了修复。testing了iPad mini和iPhone（本机和模拟器）。
更新2
Bug在iOS 8中没有完全修复，如果你在大括号之间join了一些CSS，例如color: red ，它仍然会出现。 我更新了testing用例，以显示iOS 8中的错误。
更新3
这个错误在iOS 9中没有修复，除了“按照预期行事”之外，bugreport.apple.com仍然没有任何反应。
作为惯例，我会禁用触摸设备的hover效果。
诀窍是允许可以触摸的设备，但是触摸不被用来仍然获得hover效果的设备。
我会禁用所有的hover效果，除非你使用hover效果创build下拉菜单，因为那些实际上需要双重选项卡，但对于其余的它是相当适得其反。
我正在使用的是一个简单的脚本，每当发生touchstart事件时，都会删除正文上的类。
所以我从一个没有接触的class级开始
<body class="hoverok">
然后添加下面的JavaScript，以删除第一个touchstart上的标签：
(function () { function antitouch() { if (!('addEventListener' in window)) { return; } var bodyElement = document.querySelector('body'); function touchStart () { document.querySelector('body').classList.remove('hoverok'); bodyElement.removeEventListener('touchstart', touchStart); } bodyElement.addEventListener('touchstart', touchStart); } if (window.addEventListener) { window.addEventListener('DOMContentLoaded', antitouch, false); } else { window.attachEvent('onload', antitouch); } }());
然后最后改变你的cssselect器，只有类touchok在身上才匹配。
我没有用你的东西testing它，但它会拿走hover在一个，这应该确保双标签是从来没有触发。
例如。：
.hoverok a:hover { color:red; }
hover时切换2张图像的显示状态时，我遇到了类似的问题：
.element__color-primary:hover { display: none; } .element__color-secondary:hover { display: block; }
Android设备工作正常。
使用媒体查询只在更大的屏幕上应用hover效果是我已经实现的一个快速简单的修复。 在我的情况下，这样做并没有恶化用户体验。