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!

This entry was posted in CSS, Web Development and tagged , , . Bookmark the permalink.

One Response to CSS – Elements covered by a container div not clickable

  1. Dave says:

    Thank you for this solution! That helped me a lot, especially the “better” way!

Leave a Reply

Your email address will not be published. Required fields are marked *