2011-10-08 2 views
26

エフェクトの不透明度を下げたJPGオーバーレイを使用していますが、効果としてのみ使用し、その下のコンテンツをクリック可能にしています。それは可能です、ありがとう:)))下のコンテンツにアクセスできるように、重複するdivを「クリック不可」にしますか?

あなたのコメントありがとうございました。私はJPEGが全ページをカバーするので何かを考えなければならないだろうと思う:

+0

私は正しい言葉がヒットテストだと思います。 Web上では一般的に不可能であることを示しています。 – Gleno

+1

これを行うには最速の方法があります:コンテンツをラッパーに入れ、少し透明にし、JPGを背後に置くことです。 –

+0

これはかなりスマートなダグです、ありがとう:) – pufAmuf

答えて

68

さて、pointer-events:none;がありますが、 ブラウザしかありません。 最新のブラウザ(IE11)がサポートしています。

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

+0

これは助けになりました! – FreshPro

+5

ブラウザのサポートについては、[here](http://caniuse.com/#search=pointer-events)をご確認ください。 – Khalizar

+2

最新のブラウザーがすべてこれをサポートします。 – Keavon

2

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

+1

これで 'pointer-events:none; 'を使うことができるようになりました。 – Keavon

0

はい、IE11のためのCSSの条件文(それは以下のIE10で作業したりしないよう)と一緒に使用pointer-events: none

その可能性、あなたはこれを達成するために、クロスブラウザの互換性のある解決策を得ることができます。

AlphaImageLoaderを使用すると、オーバーレイdivに透明な.PNG/.GIFを配置し、クリックした要素が蛇行して伝播することもあります。

CSS:条件付き

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

IE11:ここ

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

は、すべてのコードとbasic example pageです。

0

私が見つけた1つの簡単なトリックは、非常にw3cではなく、divをスパンにカプセル化し、そのスパンクラスを使ってオーバーレイを作ることです。 そのようにするとすべてがクリック可能になり、divはdivのように振る舞います