Elemento CSS3 con opacidad: 0 (invisible) responde a eventos del mouse

CSS3 usando Webkit en Safari; Tengo un botón que, cuando se hace clic, hace que un div se desvanezca. Ese div es solo un gran rectángulo lleno y tiene algunos botones, uno de los cuales hace que el mismo div se desvanezca.

El problema es este: cuando el elemento se ha desvanecido (opacidad: 0) y hago clic donde estaba uno de los botones, todavía se está activando onClick. En otras palabras, aunque el botón no se puede ver (opacidad: 0) todavía está allí y es parte del modelo de evento. No quiero eso

Los botones llaman a las siguientes funciones:

//  This displays the overlay (popup)
function showCategoryPopup() {

 // Was playing with the following, but with no success.
 //  popupCategory.style.display = "block";
 //  popupCategory.style.visibility = "visible";

 // Change the attributes that will be animated.
 popupCategory.style.opacity = 1; 
 popupCategory.style.webkitTransform = "scale(1.0)";
}

function hideCategoryPopup() {
 // Change the animated attributes
 popupCategory.style.opacity = 0; 
 popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events.  So, make it hidden?
//    popupCategory.style.visibility = "hidden";
//    popupCategory.style.display = "none";     

}

La clase CSS para la superposición es esta:

.popupContainer {
    opacity: 0;
    -webkit-transform: scale(0.7);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}

Si no uso la configuración de visibilidad o visualización, la animación está bien, pero los eventos mouseClick se activan para los elementos invisibles.

Si uso los bloques, se activa / desactiva sin animación.

Si utilizo el estilo de visualización, funciona más o menos, pero en lugar de que la animación se muestre de inmediato, solo se activa una vez que se activa algún otro evento en la página, como otro botón en otra parte de la página.

Pensé quizás en agregar los "eventos de puntero: ninguno" al estilo utilizado por el div emergente después de que está oculto, pero lo que estoy pidiendo parece algo que a menudo encontrarás con opacidad, por lo que debe ser un semi -frecuente problema.

Pensamientos?

Respuestas a la pregunta(3)

Su respuesta a la pregunta