css - 如何将图像 div 容器放在另一个 div 上，但保持可点击？

Question

我想将我的图像放在手风琴 div 容器上并使其保持可点击状态，因此我的图像仅在视觉上覆盖它。我怎么能这样做？

我需要编辑的页面在那里。这就是我想让我的页面看起来像的样子：

提前致谢！

score 1 · Accepted Answer

您将无法将图像放在顶部并且无法点击链接。我能想到的唯一解决方案是将图像分成两部分，一个放在手风琴上方，一个放在左边。但是，即使这样做，也意味着蓝色的 +s 将不可点击，因为图像必须位于它们上方。让切片图像的两个部分匹配也不会很有趣。（我敢肯定一两个旧浏览器会为您搞砸。）

老实说，我的建议是重新考虑这一点，因为它对网络不实用。我建议将整个图像作为背景放在手风琴上，并让女孩的手指向链接，而不是真正将鼠标悬停在链接上。

score 1 · Accepted Answer

实际上，这在大多数带有 CSS 的浏览器中都是可能的（Chrome、Firefox、Safari、IOS、Android。完整列表可用这里）

img {
    pointer-events: none;
}

IE10 或更低版本不支持。

还有许多 Javascript 解决方案，包括使用 Jquery 的THIS ONE，可在 IE 中使用。

2 回答 2