使叠加背景的点击，能够 [英] Make overlay background click-through-able

问题描述

有没有一种方法，在CSS中，我可以做一个元素的点击，干练。我有一个绝对 LY定位＆LT; D​​IV＆GT; 覆盖的链接。我希望能够通过的点击链接的覆盖＆LT; D​​IV＆GT; 。覆盖有一个透明的多为背景，链路没有覆盖像素。

我试过背景：网址（'...'）透明，但无济于事。

。

这里是一个展示的jsfiddle我的问题。链接可以点击在IE8，但不是在Firefox浏览器。我想要做的就是在 #underlay DIV图像股票。重叠是为了让我可以有从固体到透明的底部和顶部有一个渐变的背景下，这样我就可以使图像变的那种滚动到无，没有出褪色的全部的图像同时，如果这是有道理的（如果任何人有一个Android手机，尝试滚动你的备忘录和观看屏幕的顶部/底部 - 备忘录褪色成什么）。

解决方案

我已经加入指针的事件能解决问题：无; 绝对块

\r

\r

{体\r
  保证金：0;\r
  填充左：10px的;\r
  字体：宋体20像素，无衬线;\r
  行高：30PX;\r
}\r
答：悬停{\r
  颜色：红色;\r
}\r
＃叠加堵塞，\r
＃叠加传递{\r
  位置：绝对的;\r
  高度：30PX;\r
  宽度：10em;\r
  左：0;\r
}\r
\r
＃叠加阻断{\r
  顶部：30PX;\r
  背景：RGBA（0,100,0，0.2）;\r
  指针事件：无;\r
}\r
＃叠加传递{\r
  顶部：0;\r
  背景：RGBA（100,0,0，0.2）;\r
}

\r

＆LT; A HREF =＃＆GT;链路阻塞和LT; / A＆GT;＆LT ; BR＆GT;\r
＆LT; A HREF =＃称号=hoverable＆GT;链接可用＆LT; / A＆GT;＆LT; BR＆GT;\r
＆LT; A HREF =＃称号=hoverable＆GT;链接可用＆LT; / A＆GT;＆LT; BR＆GT;\r
\r
＆LT; D​​IV ID =叠加堵＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV ID =叠加扯皮＆GT;＆LT; / DIV＆GT;

\r

\r

\r

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.

I've tried background: url('...') transparent, but to no avail.

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).

解决方案

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屋！