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!

Posted in CSS, Web Development | Tagged , , | Leave a comment

Vagrant – CSS and JS broken when using shared folder

I have this problem with my CSS files getting broken encoding every time I make modifications on it on the shared folder in my host, where the shared folder is directly served by the VM’s HTTPD server (Apache). A quick … Continue reading

Posted in Apache, Linux, Web Development | Tagged , | Leave a comment

Sublime Text – Exclude Files or Directories from Go To Anything Feature

Tired of seeing unnecessary files from Sublime Text’s CTRL+P or Go To Anything search feature? Want to get rid of those generated files like minified CSS/JS or generated from templating engines? Want to get rid of them from search but … Continue reading

Posted in Web Development | Tagged | Leave a comment

Vagrant and CentOS 6.5 Guest – Port Forwarding Does Not Work for HTTPD

Been trying to setup port forwarding for this guest’s port 80 into host’s port 8080 in this vagrant setup but I can’t make it work for the past 5 hours. Playing around with Windows firewall does not give any hope. … Continue reading

Posted in Web Development | Tagged , | Leave a comment

Vagrant up failed with some weird errors

During my first week of setting up vagrant, got this weird error when running vagrant up. After some research on the internet, it turns out that the issue is caused by my VirtualBox version. Downgrading seems to be the best … Continue reading

Posted in Web Development | Tagged , | Leave a comment

Increasing sound of an MP3 file using lame

Is your mp3 file audio volume too low? Using lame MP3 encoder using your Linux box, it is just a one command away. See command below. We want an MP3 file to be 4 times louder then it was originally, … Continue reading

Posted in Linux | Tagged , , | Leave a comment

Cutting audio or video using ffmpeg

If you have installed ffmpeg on your linux box with dependencies installed as well, it is easy to cut video clips out of the original video using ffmpeg. This is useful when creating clips from your favorite movie scenes. It … Continue reading

Posted in Linux | Tagged , | Leave a comment

Centos and nginx – phpMyAdmin not working

With my default setup of Centos 6.5 64 bit and nginx 1.4.x, I got a strange error when setting up phpMyAdmin. It turns out that it was just a directory permission issue and that the default setup expects user it … Continue reading

Posted in Linux | Tagged , , , | 1 Comment

Beware of Smart Prepaid Data Offers

Been experimenting with Smart’s data offers for more than a month now especially the Always ON promo. Don’t know what went wrong but most of the time, it eats up all my load as if I was using the default … Continue reading

Posted in Personal Blog | Tagged , | 1 Comment

Rooting Cherry Mobile Cosmos X

My wife got a Cherry Mobile Cosmos X phone last month. It is a mid-range phone with good specs and is powered by Android Jelly Bean 4.2.x. I’m hesitant to root it but since I have successfully rooted my other … Continue reading

Posted in Uncategorized | 2 Comments