CSS 使叠加背景可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4822234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make overlay background click-through-able
提问by Bojangles
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 throughthe overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.
有没有办法，在 CSS 中，我可以使元素可以点击。我有一个覆盖链接的absolute位置<div>。我希望能够通过覆盖点击链接<div>。覆盖层的背景大部分是透明的，链接没有覆盖像素。
I've tried background: url('...') transparent, but to no avail.
我试过了background: url('...') transparent，但无济于事。
Hereis 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 #underlaydiv. 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 entireimage 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).
这是一个 JSFiddle 演示我的问题。该链接可以在 IE8 中单击，但不能在 FireFox 中单击。我想要做的是在#underlaydiv 中制作一个图像自动收报机。叠加是这样我可以在底部和顶部有一个从纯色到透明渐变的背景，这样我就可以使图像“滚动成空”，而不会立即使整个图像淡出，如果这有意义的话（如果有人有 Android 手机，请尝试滚动您的备忘录并观看屏幕的顶部/底部 - 备忘录消失不见）。
回答by tibalt
I've fixed your problem by adding pointer-events: none;to the absolute block.
我已经通过添加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>回答by Marnix
I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.
我认为这是不可能的，因为图像仍然是一个完整的盒子。但是你试过这些Image Maps吗？好像这就是你想要的。
OTHER OPTION
其他选项
You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.
您也可以将图像分成 2 个，并确保您的框没有覆盖您的链接。
回答by Scott Cranfill
Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?
如果您可以将覆盖层嵌套在链接中，那么这个答案也许对您有用：仅使用 CSS，是否可以在元素下方触发 :hover 和 click 事件？
