Question

Well i am not going to include any code in my question ,

I have 3 elements

the 1rst overlaps(higher index) the second and the second overlaps the 3rd..

the 3rd element is a menu button and it has to trigger an event when on hovered

but the size of the 1rst blocks the hover property of the 3rd.

So how can i leave the 1rst element on the higher stacking index order and have the

3rd fully “hoverable”?

Answer 1

You can use pointer-events: none; on the higher indexed div:

<style type="text/css">
    div {
        position: absolute;
    }

    .over {
        z-index: 10;
        pointer-events: none;
        background: white;
    }

    .under:hover {
        height: 100px;
        background: red;
    }
</style>


<div class="over">Lorem Ipsum</div>
<div class="under">Dolor sit amet</div>

Live Example

Points

• This will make the .over div completely uninteractable. You won’t be able to use any click/hover/whatever events on it. Nothing involving the mouse.
• IE and Opera don’t support it.