CSS3 Element with Opacity:0 (invisible) responds to mouse events

Question

CSS3 using Webkit in Safari; I have a button that, when clicked, causes a div to fade in. That div is just a big filled rectangle and it has a few buttons in it, one of whichcau

Answer 1

What you could do is disable the button while the opacity is set to 0 with the following styles:

pointer-events: none;
cursor: default;

This way they aren't clickable and the cursor doesn't change when it hovers over where the button was. I needed a CSS only solution and this worked for me.