html - 是否有黑客可以让图像在顶部点击？

Question

我一直在无聊地设计一个新主题，并找到了一个我非常喜欢的想法。它使用 :before 和 :after 伪元素将两个图像放在菜单栏顶部，使其看起来像一些动物正在行走/悬卡在上面。

我遇到的问题是，这些元素会使下方的按钮部分无法点击。顶部有几个像素，即使不在动物正下方，也无法点击。 Logo 位于左侧图像的后面，只能在生成 block 所在的顶部单击。

如果您感到困惑，see the jsFiddle . 在此示例中， Logo 不存在，因此您可以看到它后面的链接在没有 Tab 键的情况下完全无法点击。

是否有任何解决方法/技巧可以使图像仍然显示在所有内容的顶部，但仍允许通过图像单击其下方的链接？或许有另一种方法可以将图像添加到顶部，这样至少它们之间的空间是可点击的？

Answer 1

原始答案

好吧，它还没有完全跨浏览器，但是pointer-events: none在那些伪元素上可能是你真正想要的。 Here's the fiddle.

次要答案(可能更多跨浏览器)

从 Jimmie Lin 的想法中获得一些灵感，但保持所有语义，如果你确保所有元素的堆叠上下文保持不变，那么对于每个 a 你需要“向前推进”设置一些东西像这样(see fiddle) :

.pushForward {position: relative;}
.pushForward:before {
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1000;
}