HTML / CSS：制作一个div“invisible”点击？ [英] HTML/CSS: Make a div "invisible" to clicks?

问题描述

由于种种原因，我需要在一些文本上放置一个（大部分）透明的< div> 。但是，这意味着无法单击文本（例如，单击链接或选择它）。

例如， overlay div覆盖文本，但我想能够通过 overlay div：

点击/选择文本

 < div id =container> 
< p>一些文字< / p> 
< div id =overlaystyle =position：absolute; top：0; 
 left：0; width：100％; height：100％> 
 ...一些内容... 
< / div> 
< / div> 
  

解决方案

可以使用CSS pointer-events 。 Firefox 3.6+，Chrome 2+，IE 11+和Safari 4+支持此属性。不幸的是，我没有跨浏览器解决方法的知识。

  #overlay {
 pointer-events：none; 
} 
  

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“invisible”点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！