HTML / CSS：divをクリックに対して「非表示」にしますか？

さまざまな理由から、<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>

CSSを使用して行うことができますpointer-events。このプロパティは、Firefox 3.6以降、Chrome 2以降、IE 11以降、Safari 4以降でサポートされています。残念ながら、私はクロスブラウザーの回避策についての知識を持っていません。

#overlay {
  pointer-events: none;
}

オーバーレイを一時的に非表示にした後、イベントを再起動することで実行できます。

この質問の最初の回答を参照してください： HTMLの「オーバーレイ」。クリックすると、背後にある要素に移動できます

これを行うには、次のようにオーバーレイを非表示にします。

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();
}

このjQueryを使用する

$("div").click(function(e){e.preventDefault();});

「div」をIDまたは要素に置き換えます

divのすべてのイベント（またはひよこ）を無効にする別の方法は、デフォルトでタグが付けられているすべてのイベントをunbind（）することです。

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

または

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