使覆盖背景可点击 [英] Make overlay background click-through-able

问题描述

有没有办法，在 CSS 中，我可以让一个元素可以点击.我有一个 absolutely 定位的 <div> 覆盖一个链接.我希望能够单击通过覆盖层<div>的链接.叠加层的背景大部分是透明的，链接没有覆盖像素.

Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.

我试过background: url('...') transparent，但没用.

这里 是一个展示我的问题的 JSFiddle.该链接可以在 IE8 中单击，但不能在 FireFox 中单击.我想要做的是在 #underlay div 中制作一个图像自动收报机.叠加层是为了让我可以在底部和顶部有一个从实心到透明渐变的背景，这样我就可以使图像有点滚动到无"，而不会淡出 整个 图像立即，如果这有意义(如果有人有安卓手机，请尝试滚动您的备忘录并观看屏幕的顶部/底部 - 备忘录会逐渐消失).

Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).

推荐答案

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

I've fixed your problem by adding pointer-events: none; to the absolute block.

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>

这篇关于使覆盖背景可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！