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.

4 Responses 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!

  2. bobby says:

    this solutions were excellent worked perfectly after hours of pain going through my css code to find a fault i couldn’t only to stumble upon your blog and see the answer to all my problems thank you so much also if you can send a link to this answer to stack overflow a lot of people need it

  3. I can’t believe I’ve gone my whole life not knowing that you can make child elements of a hidden parent visible.


  4. Thank you for that help, it works great. I cannot disable visibility (I need both images) so I use the first solution.

    Thank you

Leave a Reply

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