Home/ Questions/Q 8596869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:47:01+00:00

I have read several topics like: display box shadow above the text CSS3 box

  • 0

I have read several topics like:

and many others, but I could not find an answer for what I search for. When an element is placed above other elements, the interaction with these is broken (no events coming through). This means, the underlying text can not be selected or an elements events are not triggered. Here’s a demo on jsFiddle.

As you can see, there are two problems.

  1. As already mentioned, text can not be selected nor the hover-event is propagated to the div.hover element.
  2. The size of the div.shadow element is not absolutely correct. That is why part of the div.hover element is out of the shadow-box (and there, the hover-event reaches the hover-element).

For the first problem, I’d appreciate a CSS only solution, but I’d be satisfied with some JavaScript as well.

Appendix: Problem 2. on Mozilla Firefox 15.0.1

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. You can use the CSS pointer-events property. Set it on div.shadow per this jsFiddle.
    2. I cannot see what the issue is (using Chrome 23).

    Update

    For #2 remove the fixed height on div.wrapper and add overflow: auto (this will allow the margin on div.hovered to have some effect on div.wrapper). See this jsFiddle.

    • 0