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

问题描述

由于各种原因，我需要在某些文本上放置（大部分）透明的< div> 。但是，这意味着无法单击文本（例如，单击链接或选择它）。是否可以简单地将这个div看不见到点击和其他鼠标事件？

例如， overlay div覆盖文本，但是我想通过覆盖 c

$ b $点击/选择文本b

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

解决方案

可以使用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屋！