Prevent absolutely positioned element on top of div to block div's hover style?

R. Kohlisch :

I have a div which has background-color: blue;. Now when I hover, it changes to red; I also have an absolutely positioned element, which is (visually) on top of that div, semantically a sibling.

<div>
<div>My blue div</div>
<div>My absolutely positioned element, which is actually on top of my blue div</div>
</div>

Now when I hover over my absolutely positioned element, my blue div will remain blue, and not take its red hover style, since technically I am not hovering over it directly anymore.

Any way I can prevent this?

japrescott :

You can add some CSS to make your absolute positioned element be "transparent" for the your pointer(mouse, touch, etc) by adding following css. But this will also ignore all other events (click, mouseover etc)

.myAbsoluteDiv {
   pointer-events: none;
}

if you still want to attach events etc. you can use following more extensive css

.blueDiv{
    backgroundColor: blue;
}
.outsideDiv:hover .blueDiv {
   backgroundColor: red;
}