使叠加背景点击进入

Question

有没有办法,在CSS中,我可以使元素点击通过.我有一个覆盖链接的absolute位置<div>.我希望能够点击的链接通过覆盖<div>.叠加层具有大部分透明背景,并且链接没有覆盖像素.

我试过了background: url('...') transparent,但无济于事.

这是一个JSFiddle演示我的问题.可以在IE8中单击该链接,但不能在FireFox中单击.我想做的是在#underlaydiv中制作一个图像自动收报机.叠加是这样的,我可以在底部和顶部有一个从实心到透明渐变的背景,所以我可以使图像排序为"滚动到任何东西",而不会立即淡出整个图像,如果这是有道理的(如果有人有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>