web-dev-qa-db-ja.com

重複するdivを「クリック不可」にして、以下のコンテンツにアクセスできるようにしますか？

エフェクトの不透明度を下げたJPGオーバーレイを使用していますが、エフェクトとしてのみ使用し、そのdivの下のコンテンツをクリック可能にします。それは可能ですか、ありがとう:)））

みなさんのコメントをありがとう。 JPEGはページ全体をカバーしているため、他のことを考えなければならないでしょう。

javascriptjquerycssevent-listener
33
pufAmuf

さて、pointer-events:none; だけ いくつかのブラウザ 最新のブラウザ（およびIE11）がサポートしています。

https://developer.mozilla.org/en/CSS/pointer-events

89
Andy

いいえ、ちがいます。オーバーレイ要素は常にクリックをインターセプトします。可能な回避策の1つは、clickイベントをオーバーレイ要素にバインドし、現在のマウス位置を取得し、その要素を下の要素の位置と比較して、その要素がクリックを登録するかどうかを判断することです。しかし、これを実現するはるかに良い方法がある可能性があります。しかし、あなたのコードを見ずに、私は知る方法がありません。

2
maxedison

はい、可能です

使用する pointer-events: none IE11のCSSの条件ステートメント（IE10以下では機能しないため）とともに、これを実現するためのクロスブラウザー互換ソリューションを取得できます。

AlphaImageLoaderを使用すると、透明な.PNG/.GIFsをオーバーレイdivに追加し、クリックが下にある要素に伝播するようにします。

CSS：

pointer-events: none;
background: url('your_transparent.png');

IE11条件付き：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

すべてのコードを含む 基本的なサンプルページ です。

1
Naeem Ul Wahhab

私が見つけた1つの簡単なトリックは、あまりW3Cではありませんが、divをスパンにカプセル化し、そのスパンクラスを使用してオーバーレイを作成することです。そうすれば、全体がクリック可能になり、divはdivのように動作します

0
Matoeil