javascript - クリックできるオーバーレイ Div

Question

css または javascript を使用して、半透明の div 要素を他のすべての要素の上に視覚的に表示できるようにする方法があるかどうか疑問に思っていましたが、その下のハイパーリンクやその他のインタラクティブな要素は引き続きクリックできますか? 私のウェブサイトに、ウェブサイトの外観を暗くしたり明るくしたりする機能を与えるための気まぐれなアイデアです。

編集

z-index がオブジェクトを背景から前景に移動することは知っていますが、インタラクティブなオブジェクトもブロックします...

Answer 1

Such behavior possible via poiner-events:none (non-standard and not supported by IE). Originally being an SVG feature, it's supported for any SVG element (IE 9+):

<svg poiner-events="none">
  <rect width="100%" height="100%" fill="black" fill-opacity="0.5" />
</svg>

But for the effect you mentioned I would recommend to use opacity on body and some background on html:

body {
  opacity: 0.5;
}

html {
  background: black;
}

Answer 2

create another div element on top of existing div, and have it's z-index more than the existing one. Hope this should help.