CSSです。隠されたオブジェクトはクリック可能か？

質問

もし visibility プロパティが、HTML 要素のスタイルに hidden に設定されていますが、まだクリック可能でしょうか？

をクリックすると display プロパティに none に設定されている場合、その要素は DOM ツリーの一部でもないため、問題にはなりません。しかし、もし hidden 要素がまだマウス イベントに応答しているかどうか。

どのように解決するのですか？

とは display: none それ です はまだ DOM の一部です。ビューポートにレンダリングされないだけです。

を持つ要素へのクリックについては visibility: hidden である要素のクリックについては、そのイベントは ではなく が発生します。

jsFiddle .

$('div').click(function() {
    alert('Hello')
});

div {
    width: 100%;
    height: 100%;
    visibility: hidden; 
}

<div>abc</div>