HTML“覆盖”它允许点击通过到它后面的元素 [英] HTML "overlay" which allows clicks to fall through to elements behind it

问题描述

我试图在网页顶部覆盖一个元素（绘制任意图形），我来到了一个点，我可以将它堆叠在一个元素的顶部，但这阻止了用户从点击任何链接/按钮等。
有一种方法让它的内容浮在一切之上（它是半透明的，所以你仍然可以看到后面的东西），并让用户与下面的层交互？

我已经在DOM事件模型中找到了很多信息，但没有一个解决了按钮和其他本地控件似乎没有获得点击的问题。 / p>

感谢您的帮助！

解决方案

将元素的高度设置为零，但溢出：visible;将此与指针事件组合：none;似乎涵盖了所有的基础。

  .overlay {
 height：0px; 
 overflow：visible; 
 pointer-events：none; 
 background：none！important; 
} 
  

I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc. Is there a way to have its content float on top of everything (it's semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?

I've found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other "native" controls never seem to get the clicks in the first place.

Thanks for any help!

解决方案

A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}

这篇关于HTML“覆盖”它允许点击通过到它后面的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！