iOS 跟随隐藏层上的链接

Question

这是我的 fiddle : *更新后看起来更漂亮:http://jsfiddle.net/fmYpE/1/

<div class="block">
    <img src="//placekitten.com/240/240" alt="Kitty" />
    <div class="block-overlay">
        <ul>
            <li><a href="//placekitten.com/10/10">Link</a></li>
            <li><a href="//placekitten.com/10/10">Link</a></li>
            <li><a href="//placekitten.com/10/10">Link</a></li>
            <li><a href="//placekitten.com/10/10">Link</a></li>
        </ul>
    </div>
</div>
.block { position: relative; }

.block-overlay {
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
}

.block:hover > .block-overlay { opacity: 1; }

在 iOS 和其他可能的触摸设备中，如果您点击隐藏链接的图像，该链接将被注册为一次点击，您将被重定向。

我需要一种方法来防止这种情况以某种方式发生。在我的实际代码中，我有一个方形图像并隐藏在它下方，您将看到来自社交共享网站的用户数据:用户名、头像、状态更新等。

这些都是链接。我希望能够点击图像并在图像上覆盖 div 转换position:absolute，然后能够点击/单击链接，并且在转换完成之前不跟随它们。

我尝试了伪类的组合，:focus, :active，也尝试了 Modernizr, .touch, .no-touch。

我在这里偶然发现了这篇文章，但他们只谈到静态文本，而不是链接... http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ (滚动到结论段落)

非常感谢任何帮助，谢谢。

Answer 1

一位同事让我知道了 CSS 属性:pointer-events。

我能够使用指针事件设置覆盖 div:无。通过几行 jQuery，我将指针事件设置回自动并稍微延迟以适应 css 转换。

效果很好。