CSS – Elements covered by a container div not clickable

A link was covered by a div for some reason but although the link is visible, it is not click-able (partially). Hover is not working either. This is because the container div covering the link accepts all the clicks and over event, not the link under it. There is a CSS solution but is not backwards compatible with older browsers.

Update: There is a better way

CSS pointer-events

The CSS style pointer-events can be set to none so that it will not receive hover/clicks events, instead the event will occur on anything behind it. However, there is no luck making it work on browsers IE 10 and below. See compatibility table.

CSS pointer-events by caniuse.com

Since the link is just partially covered at the bottom by the div, I decided to give pointer-events: none a try.

.some-horizontal-container {
  pointer-events: none;
}

However, all child elements will receive no hover/clicks as well. To fix that, we need to turn pointer-events back specific to these elements.

.some-horizontal-container a.btn{
  pointer-events: all;
}

Update: The better way

There were severe draw back when I disable the pointer events for the widget I am working on especially with touch events. I found a better way where it works for all scenarios.

Instead of disabling and enabling the pointer events, I used the visibility style instead. visibility: hidden for the div that overlays the clickable element under it, then visibility: visible for the child elements of the overlay where it should be clickable These child elements does not cover anything under it and they are just small buttons.

That’s it!