HTML/CSS:使 div“不可见"点击? [英] HTML/CSS: Make a div "invisible" to clicks?

问题描述

出于各种原因，我需要在一些文本上放置一个(大部分)透明的

.但是，这意味着无法单击文本(例如，单击链接或选择它).是否可以简单地使这个 div 对点击和其他鼠标事件不可见"?

例如，overlay div覆盖了文本，但我希望能够通过overlay div来点击/选择文本:

<p>一些文字</p><div id="overlay" style="position: absolute; top: 0;左:0；宽度:100%；高度:100%">……一些内容……

解决方案

可以使用 CSS 指针事件.Firefox 3.6+、Chrome 2+、IE 11+ 和 Safari 4+ 支持此属性.不幸的是，我不了解跨浏览器的解决方法.

#overlay {指针事件:无；}

For various reasons, I need to put a (mostly) transparent <div> over some text. However, this means that the text can't be clicked (eg, to click links or select it). Would it be possible to simply make this div "invisible" to clicks and other mouse events?

For example, the overlay div covers covers the text, but I would like to be able to click/select the text through the overlay div:

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

解决方案

It can be done using CSS pointer-events. This property is supported in Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}

这篇关于HTML/CSS:使 div“不可见"点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！