CSS ポインターイベントを使用して Div をクリックを影響を受けないようにする方法は?

CSS ポインター イベント: クリックの影響を受けない Div を作成する

透明なオーバーレイ div を実装する場合、基礎となる div と対話することが困難になりますオーバーレイがクリックやその他のマウス イベントをインターセプトするための要素。これに対処するには、CSS の pointer-events プロパティを使用できます。

Pointer-Events について

pointer-events プロパティは、特定の要素がユーザー入力にどのように応答するかを制御します。 。ポインターイベントの設定: なし。要素をレンダリングすると、見た目はそのままで、マウス イベントに対して非表示になります。

ソリューションの実装

次の例を考えてみましょう:

<code class="html"><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></code>

#overlay div がクリックに対して非表示になるようにするには、次の CSS ルールを追加します:

<code class="css">#overlay {
  pointer-events: none;
}</code>

これで、マウスのクリックやその他のイベントは、インタラクションをトリガーせずにオーバーレイ div を通過します。

ブラウザのサポート

ポインター イベントは最新のブラウザでサポートされています:

• Firefox 3.6
• Chrome 2
• IE 11
• Safari 4

クロスブラウザーの回避策

残念ながら、ポインター イベントに対する既知のクロスブラウザーの回避策はありません。

以上がCSS ポインターイベントを使用して Div をクリックを影響を受けないようにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。