HTML / CSS:使div对点击“不可见”吗?


98

由于各种原因,我需要<div>在某些文本上(大部分)保持透明。但是,这意味着无法单击文本(例如,单击链接或将其选中)。是否可以简单地使该div对点击和其他鼠标事件“不可见”?

例如,overlaydiv覆盖了文本,但我希望能够通过overlaydiv 单击/选择文本:

<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>

1
最简洁的答案是不。(已经讨论了几次,但是很难找到重复项,无法想到好的关键字...)您需要透明DIV做什么?
Pekka 2010年

2
我认为那是不可能的。也许您讲述了“各种原因”,即您真正想要实现的目标?
davehauser

1
@Null我会保留-1,直到很清楚OP想要做什么。
Pekka 2010年

1
NullUserException-他的提议将如何阻止人们复制其网站上的内容?如果有的话,他正试图做相反的事情-他希望消除透明div的影响(使文本难以单击和选择)。
Hammerite 2010年

@汉默你是对的。我删除了downvote。
NullUserException

Answers:


159

可以使用CSS来完成pointer-events。Firefox 3.6 +,Chrome 2 +,IE 11+和Safari 4+支持此属性。不幸的是,我不了解跨浏览器的解决方法。

#overlay {
  pointer-events: none;
}

3
啊,看起来不错!现在,唯一的问题是我必须让一些孩子接受指针事件……但是也许我可以弄清楚这一点。谢谢!
David Wolever 2010年

2
酷:pointer-events: visible看起来可以满足我的要求。谢谢!
David Wolever

适用于Chrome!爱这是可能的!
BT

有一个指针事件polyfill
rink.attendant.6 2015年

最简单,最两岸的答案!
琼斯G


0

您可以通过隐藏叠加层来做到这一点:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}


-1

禁用div上的所有事件(或小鸡)的替代方法是unbind()默认情况下,所有附加有标签的事件

  $('#myDivId').unbind();

要么

  $('#myDivId').unbind("click");

jquery现在使用off()支持unbind(),并且仅删除处理程序,不会阻止div捕获点击。
pmoleri '16
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.