Why does opacity negate pointer events?

Question

In the following setup, why does the click event (and any other pointer event) not get fired?

If you remove the opacity: 0.5 line, it will work fine.

For posterity, in case jsFiddle ever goes down (December 21 is approaching):

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");
    });
});

(Tested in latest stable Chrome and Firefox)

That is weird! I'd like to know why too. – techfoobar Dec 12 '12 at 19:06 — techfoobar, Dec 12 '12 at 19:06

score 5 · Accepted Answer · edited May 23 '17 at 12:29

"Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0 and opacity: 1..."

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

EDIT:

Also, your particular example has the <p> element overlapping the <a>.

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

So you could fix this by either moving the <a> so that it does not interfere, or by using z-index to re-adjust the stacking order. The latter option may have cross-browser issues but I have not tested. I recommend re-factoring your HTML so that these two elements do not overlap with each other.

EDIT 2:

Here is a related SO question, however the accepted answer is incorrect.

What has bigger priority: opacity or z-index in browsers?

+1 i would rather want to see this without italic paragraph its ... braking my eyes — NullPoiиteя, Dec 12 '12 at 19:22
@NullPointer, noted & fixed. Although one could read the same paragraph at the source link. — Sparky, Dec 12 '12 at 19:25
Great answer, explanation and reference. I fixed it by setting the `z-index` to 1. — Lazlo, Dec 12 '12 at 19:26

score 3 · Answer 2 · answered Dec 12 '12 at 19:11

you might understand by this line

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

Using this property with a value different than 1 places the element in a new stacking context.

source :MDN

and here p is overlapping a so either set the width of p to not overlap a or set a higher z-index

mingos · Answer 3 · 2012-12-12T19:23:27.857

-1

The a element comes before p, and note that p is 100% wide. This means that p is effectively ABOVE a.

You can either change a element's z-index to something above 0 (http://jsfiddle.net/523ve/5/) or swap p and a in your HTML so that a comes after p (http://jsfiddle.net/523ve/3/).

I hope what I've written makes any sense ;).

edited Dec 12 '12 at 19:23

answered Dec 12 '12 at 19:12

mingos

23,778
12
70
107

2

-1, this accounts for why the paragraph ought to block the anchor, but does not explain why opacity affects this behavior. – apsillers Dec 12 '12 at 19:18
Sorry, I was writing it up. – apsillers Dec 12 '12 at 19:19
I see. The question was: "*In the following setup*, why does the click event (and any other pointer event) not get fired?". As far as I understand it, I have answered the question in full. – mingos Dec 12 '12 at 19:21
1

I've removed my downvote, since this isn't *wrong*, but it is incomplete, as it fails to answer the question of why opacity:1 does not block but opacity less than 1 does. – apsillers Dec 12 '12 at 19:21
1

Oh, cool. The OP used the `z-index` solution that I first suggested. Keep the downvotes coming. [sigh] – mingos Dec 12 '12 at 19:38
If you re-read the question, you'll note that the OP was not asking for a fix. He was asking _why_ removing `opacity` was making all the difference. – Sparky Dec 12 '12 at 19:45
I don't agree that this was grounds for a downvote, the poster has explained that the P was above A and a simple z-index will fix it. Some poeple.. – Kyle Dec 13 '12 at 08:17

Why does opacity negate pointer events?

3 Answers3