Question

这是我的小提琴： *更新后看起来更好：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转换位置：绝对覆盖图像，然后能够点击/单击链接，而不是在转换完成之前跟随它们。

我尝试过伪类的组合，：focus，：active，还尝试过Modernizr，.touch，.no-touch。

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

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

Answer 1

一位同事让我了解了CSS属性：pointer-events。

我能够使用pointer-events：none设置overlay div。通过几行jQuery，我将指针事件设置回auto，稍有延迟，以适应css转换。

效果很好。

iOS跟随隐藏图层上的链接

1 个答案: