是否有一个黑客可以让图像点击仍然在顶部？

Question

我一直在设计一个无聊的新主题，并找到了一个我真正喜欢的主意。它使用:before和:after伪元素将两个图像放在菜单栏的顶部，使其像一些动物一样走路/悬挂在上面。

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

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

是否有任何解决方法/黑客可以使图像仍然显示在所有内容之上，但是仍然允许在图像下方点击其下方的链接？也许在顶部添加图像的另一种方法是至少可以点击它们之间的空间？

Answer 1

原始答案

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

次要答案（可能更多跨浏览器）

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

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

Answer 2

一种方法（这非常hacky，但理论上应该有效）是你应该添加一个比动物图标高<div>的{​​{1}}，然后将其设置为不透明度为0.我不确定将不透明度设置为0是否会隐藏元素（它不应该），但是一旦你创建了这个z-index，就可以复制粘贴那些受你的图标影响的链接。

从理论上讲，这个透明的DIV会再次有效地复制链接并捕获应该放在图标上的所有点击事件。

尝试一下，也许它有效 - 只是一个愚蠢的想法。