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

CSS3 utilizando Webkit en Safari; Tengo un botón que, cuando hace clic, hace que un div se desvanezca. Ese div es simplemente un gran rectángulo lleno y tiene algunos botones, uno de los cuales hace que el mismo div se desvanezca.Elemento CSS3 con opacidad: 0 (invisible) responde a los eventos del mouse

El problema es este: cuando el elemento se ha desvanecido (opacidad: 0) y hago clic en donde estaba uno de los botones, todavía se está activando el 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 llamar 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 la siguiente:

.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 yo no uso la configuración de visibilidad o de visualización en absoluto, la animación está bien, pero los eventos mouseClick se activan para los elementos invisibles.

Si utilizo los bloques, enciende/apaga sin animación.

Si utilizo el estilo de visualización, funciona, pero en lugar de mostrar la animación inmediatamente, solo se activa una vez que se activa otro evento en la página, como otro botón en otra parte de la página.

Pensé que tal vez podría agregar "pointer-events: none" al estilo utilizado por el elemento emergente div después de que está oculto, pero lo que estoy buscando parece algo que a menudo encontraría con opacidad por lo que debe ser un problema semi frecuente.

¿Pensamientos?

Fuente

2011-01-13 Woodster

Si configura su div para tener una opacidad de cero, aún podrá interactuar con el elemento "invisible". Desea establecerlo en display:none en su lugar. Podría hacer ambas cosas, permitiendo que el div se desvanezca a cero y luego vire en el display:none cuando la animación haya finalizado.

Fuente

2011-01-13 01:32:19

Es cierto. Debería pensar en un elemento opacity: 0 como si estuviera hecho de cristal :) –

La pantalla: ninguno // display: el bloqueo funciona para resolver el problema con el clic del mouse, pero luego la opacidad no se anima de 1 a 0. El div solo aparece y desaparece. Este fue el problema con la pantalla: atributo. He intentado configurar la pantalla: ninguno antes y después de establecer la opacidad: 0, pero creo (?) Que los resultados de la función se aplican en masa después de llamar a la función y que da un resultado neto de la desaparición del bloque en lugar de Desvanecerse. ¿Hay algo más que deba hacer para establecer el bloque después de que termine la animación de opacidad? – Woodster

@Woodster Podría recomendarle que use jQuery para algo como esto. Los efectos de animación incorporados (como 'fadeOut') son fáciles de usar. 'fadeOut' se desvanece y luego lo establece en' display: none' fuera de la caja. –

Una solución limpia (¿eh?) Para el problema que tiene, que es un problema común para cosas como información sobre herramientas y ventanas emergentes modales con un efecto de fundido de entrada, es no solo la transición entre opacidad, sino también propiedad de "visibilidad". A diferencia de 'mostrar', 'visibilidad' es una propiedad animable real, y hará lo correcto, ya que hace que el elemento sea invisible (y no responda a eventos de entrada) solo antes de que comience la transición, y solo después de que la transición regrese a el estado inicial.

La respuesta dada anteriormente funciona, pero depende de JavaScript para manipular propiedades que pueden ser menos deseables. Al hacer todo esto a través de CSS puro, su JavaScript no tiene que hacer nada más que configurar y deshacer una clase en el elemento que debe mostrarse. Si está creando una información sobre herramientas, se puede hacer sin ninguna JS haciendo que la información sobre herramientas sea un elemento secundario y utilizando el pseudo-selector 'hover' en el elemento primario.

Así que para un emergente activar haciendo clic en algo, que habría de estilo que de este modo:

#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; 
}

Entonces el JavaScript puede simplemente cambiar la clase "muestra".

Un ejemplo vivo: http://jsfiddle.net/y33cR/2/

Fuente

2014-01-24 14:42:53 aphax

Esto debe aceptarse respuesta en mi humilde opinión. –

Esto es genial. http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility explica bien la semántica de transición de visibilidad. http://www.greywyvern.com/?post=337 entra en gran detalle (pero se complica demasiado al usar un retraso de transición). –

Buen uso de la visibilidad, gracias, no sabía elementos ocultos por la visibilidad no desencadenan eventos. –

Lo que podría hacer es deshabilitar el botón mientras que la opacidad se establece en 0 con los siguientes estilos:

pointer-events: none; 
cursor: default;

De esta manera no se puede hacer clic y el cursor no cambia cuando se cierne sobre donde estaba el botón. Necesitaba una solución CSS única y esto funcionó para mí.

Fuente

2015-11-25 10:51:11 ConorJohn

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

Respuesta

Cuestiones relacionadas