(this happens with a transition). Now you only see div a and its child child-a. You CAN click on div a but you cannot click on child-a. If you try to do so, you will actually have clicked on child-b.

It appears eventhough child-b's parent does not get triggered by mouseevents anymore and seems to be hidden, the child still listens for/ gets triggered by them. I would expect the child to also be "truly" hidden like its parent.

How can I make sure the click on the area where you seechild-a actually is applied onchild-a as well? I do want to be able to use a transitions in opacity between showing and hiding the div, so using

display:none

is something you cannot transition (as far as I understand it).

I did add the

display:none

toggle in the example because that toggle does behave the way I whould expect (only then you cannot transition anymore).