参见英文答案 >
Click through a DIV to underlying elements14个答案有没有办法，在CSS中，我可以创建一个元素点击通过。我有一个绝对定位的< div>覆盖一个链接。我想要通过覆盖< div>点击链接。覆盖层具有大部分透明的背景，并且链接没有覆盖像素。
我已经尝试了背景：url(‘…’)透明，但无济于事。
Here是一个JSFiddle演示我的问题。该链接可以在IE8中单击，但不能在FireFox中。我想做的是在#underlay div中创建一个图像代码。覆盖层是这样的，我可以在底部和顶部具有从实体到透明的渐变的背景，所以我可以使图像“滚动到任何东西”，而不会立即衰减整个图像，如果这是有道理的(如果有人有Android手机，请尝试滚动您的备忘录并观看屏幕的顶部/底部 – 备忘录淡入淡出)。
解决方法
我通过添加指针事件来解决你的问题：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,.2);
- pointer-events: none;
- }
- #overlay-passing {
- top: 0;
- background: rgba(100,.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>
