Question

有没有办法，在CSS中，我可以使元素点击通过。我有一个absolute位置<div>覆盖了一个链接。我希望能够点击通过链接<div>链接。叠加层背景主要是透明的，链接没有覆盖像素。

我已经尝试了background: url('...') transparent，但无济于事。

Here是一个证明我的问题的JSFiddle。可以在IE8中单击该链接，但不能在FireFox中单击。我想要做的是在#underlay div中制作一个图像自动收报机。叠加是这样的，我可以在底部和顶部有一个从实心到透明渐变的背景，这样我就可以使图像“滚动到任何东西”，而不会将整个图像淡出一下子，如果这是有道理的（如果有人有Android手机，请尝试滚动你的备忘录并观看屏幕的顶部/底部 - 备忘录渐渐消失）。

Answer 1

我已通过将pointer-events: none;添加到绝对块来解决您的问题。

body {
  margin: 0;
  padding-left: 10px;
  font: 20px Arial, sans-serif;
  line-height: 30px;
}
a:hover {
  color: red;
}
#overlay-blocking,
#overlay-passing{
  position: absolute;
  height: 30px;
  width: 10em;
  left: 0;
}

#overlay-blocking {
  top: 30px;
  background: rgba(0,100,0, .2);    
  pointer-events: none;
}
#overlay-passing {
  top: 0;
  background: rgba(100,0,0, .2);    
}

<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>    

<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>

Answer 2

我认为这是不可能的，因为图像仍然是一个完整的盒子。但你试过这些Image Maps吗？似乎这就是你想要的。

其他选项

你也可以将你的图像分成2个，并确保你的盒子当然没有覆盖你的链接。

Answer 3

如果你可以将叠加层嵌入链接中，也许这个答案对你有用：With only CSS, is it possible to trigger :hover and click events underneath an element?

使叠加背景点击进入

3 个答案: