3

次の設定で、クリックイベント（およびその他のポインタイベント）が発生しないのはなぜですか？

線を削除すると、正常に機能しますopacity: 0.5。

http://jsfiddle.net/523ve/

後世のために、jsFiddleがダウンした場合（12月21日が近づいています）：

HTML：

<div>
    <a>Click</a>
    <p>Paragraph</p>
</div>

CSS：

div { position: relative; margin: 40px; }
a { position: absolute; top: 0; right: 0; }
p { opacity: 0.5; }

JS：

$(document).ready(function(event) {
    $("a").click(function(event) {
        alert("Alert");
    });
});

（最新の安定したChromeとFirefoxでテスト済み）

4

3 に答える 3

5

「不透明度が 1 未満の要素は単一のオフスクリーン画像から合成されるため、その外側のコンテンツは、その内側のコンテンツ間で z オーダーでレイヤー化できません。同じ理由で、実装は、任意の新しいスタッキング コンテキストを作成する必要があります。不透明度が 1 未満の要素。不透明度が 1 未満の要素が配置されていない場合、実装は、それが作成するレイヤーを、その親のスタック コンテキスト内で、z-index: 0および opacity: 1...」

http://www.w3.org/TR/css3-color/#transparency

編集：

また、特定の例には、<p>要素が重なってい<a>ます。

http://jsfiddle.net/523ve/4/

<a>したがって、干渉しないように を移動するか、 を使用z-indexしてスタック順序を再調整することで、これを修正できます。後者のオプションにはクロスブラウザーの問題があるかもしれませんが、私はテストしていません。これら 2 つの要素が互いに重ならないように、HTML をリファクタリングすることをお勧めします。

編集2：

これは関連する SO の質問ですが、受け入れられた回答は正しくありません。

ブラウザの不透明度と z-index のどちらが優先されますか?

于 2012-12-12T19:12:38.243 に答える
2

この行で理解できるかもしれません

CSS の opacity プロパティは、要素の透明度、つまり要素の背後にある背景を重ねる程度を指定します。

このプロパティを 1 以外の値で使用すると、要素が新しいスタッキング コンテキストに配置されます。

ソース：MDN

ここでpはオーバーラップaしているので、幅をpオーバーラップしないように設定するか、より高くa設定しますaz-index

于 2012-12-12T19:11:23.547 に答える
-1

a要素はの前にあり、幅が 100%pであることに注意してください。pこれは、p実質的に ABOVEであることを意味しaます。

a要素の z-index を 0 より大きい値 (http://jsfiddle.net/523ve/5/) に変更するか、HTML でスワップpして後になるようにすることができます(http://jsfiddle.net/523ve/3/) 。 .aap

私が書いたことが意味をなすことを願っています;）。

于 2012-12-12T19:12:41.950 に答える