使覆盖背景可以点击[重复]

Posted 2023-03-05

【中文标题】使覆盖背景可以点击[重复]

【英文标题】：Make overlay background click-through-able [duplicate]

【发布时间】：2011-06-16 20:56:41

【问题描述】：

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

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

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

【问题讨论】：

@Knu：覆盖 div 就像它所覆盖的东西一样，是一个块级元素。制作一个跨度inline-block 或其他东西可能会起作用。

【参考方案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>

【讨论】：

非常感谢！最初的应用程序已经过时了，但是这很棒。跨浏览器有多厉害？

回答了我自己的问题...它适用于 IE8、Opera 11.11 和 Firefox 4。您还有其他测试用例吗？

IE6/7 - 好的，chrome/safari5 (win) - 好的

不是真的！ caniuse.com/#search=pointer-events，我在 Opera 11.11 上测试过，但它不工作，可能你的测试用例坏了

@Jakob Cosoroaba，没错。指针事件不是一个完全跨浏览器的功能。我不得不使用 js 作为后备（

【参考方案2】：

我认为这是不可能的，因为图像仍然是一个完整的盒子。但是你试过这些Image Maps吗？看来这就是你想要的。

其他选项

您也可以将您的图片分成 2 份，当然，请确保您的框不会覆盖您的链接。

【讨论】：

想一想，我可以分割图像。谢谢！

不，我们不会在 2011 年拆分图像。如果必须，请使用冗余元素，但不要拆分图像，没有必要。

@reisio - 是的，我的回复有点草率 - 分割图像不起作用:-(

@JamWaffles 你也试过图像映射吗？

否 - 图像映射在这种情况下是不切实际的，因为底层内容是通过动画制作的。 jQuery。不过感谢您的建议:-)

【参考方案3】：

如果您可以将叠加层嵌套在链接中，也许这个答案会对您有所帮助：With only CSS, is it possible to trigger :hover and click events underneath an element?

【讨论】：

回复：您的编辑：在这种情况下，不，我找到的答案对您没有帮助。我认为解决方案必须涉及 javascript 点击检测。你想走那条路吗？

没有。这听起来像是一条黑暗而可怕的道路:-(嗯，不是那么黑暗和可怕，但并不优雅。