0

这是我的小提琴：*更新为更好看：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/（滚动到结论段）

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

4

1 回答 1

0

一位同事让我知道了 CSS 属性：指针事件。

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

效果很好。

于 2013-06-17T21:27:23.420 回答