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

A clean(er?) solution for the problem you are having - which is a common problem for things like tooltips and modal popups with a 'fade-in' effect - is to not only transition between opacity, but also the "visibility" property. Unlike 'display', 'visibility' is an actual animatable property, and it will do the right thing in that it makes the element invisible (and non-responsive to input events) only before a transition begins, and only after a transition returns to the initial state.

The previously given answer does work, but depends on JavaScript to manipulate properties which may be less desirable. By having all this done through pure CSS, your JavaScript has to do nothing other than set and unset a class on the element that needs to be shown. If you're creating a tooltip, it can be done without any JS at all by making the tooltip a child element and using the 'hover' pseudo-selector on the parent.

So for for a popup triggered by clicking on something, you would style it like so:

#popup
{
  /* ...cosmetic styling, positioning etc... */

  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;

  opacity: 0;
  visibility: hidden;
}

#popup.shown
{
  opacity: 1;
  visibility: visible;
}

Then your JavaScript can simply toggle the "shown" class.

A live example: http://jsfiddle.net/y33cR/2/

Answer 2

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.

Answer 3

If you're setting your div to have an opacity of zero, you're still going to be able to interact with the "invisible" item. You want to set it to display:none instead. You could do both, allowing the div to fade out to zero and then tack on the display:none when the animation has finished.