6

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

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

如果您感到困惑，请参阅 jsFiddle。在此示例中，徽标不存在，因此您可以看到它后面的链接是完全无法点击的。

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

4

2 回答 2

15

原始答案

好吧，它还没有完全跨浏览器，但pointer-events: none在那些伪元素上可能是你真正想要的。这是小提琴。

次要答案（也许更多跨浏览器）

从 Jimmie Lin 的想法中获得一些灵感，但保持一切语义，如果您确保所有元素的堆叠上下文保持不变，那么对于每个a您需要“向前推进”的东西，请设置如下内容（参见小提琴）：

.pushForward {position: relative;}
.pushForward:before {
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1000;
}
于 2012-07-31T03:11:58.373 回答
2

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

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

试试看，也许它有效 - 只是一个 hacky 想法。

于 2012-07-31T03:14:50.207 回答