Transiciones en la propiedad de visualización de CSS

Actualmente estoy diseñando un menú 'mega desplegable' de CSS, básicamente un menú desplegable normal solo de CSS, pero que contiene diferentes tipos de contenido.

En el momento, parece que las transiciones CSS 3 no se aplican a la propiedad 'display', es decir, no puede hacer ningún tipo de transición desde display: none a display: block (o cualquier combinación).

¿Hay alguna forma de que el menú de segundo nivel del ejemplo anterior se "desvanezca" cuando alguien se desplaza sobre uno de los elementos del menú de nivel superior?

Soy consciente de que puede utilizar transiciones en el visibility: propiedad, pero no puedo pensar en una forma de usar eso de manera efectiva.

También intenté usar la altura, pero fallé estrepitosamente.

También soy consciente de que es trivial lograr esto usando JavaScript, pero quería desafiarme a mí mismo para usar solo CSS, y creo que me estoy quedando un poco corto.

preguntado el 25 de julio de 10 a las 19:07

posición: absoluta; visibilidad: oculta; es lo mismo que display: none; -

@Jawad: solo si agrega algo como z-index:0 también. -

@Jawad: se recomienda no usar nunca visibility: hidden a menos que usted quieres lectores de pantalla para leerlo (mientras que los navegadores típicos no lo harán). Solo define el la visibilidad del elemento (como decir opacity: 0), y todavía se puede seleccionar, hacer clic y lo que solía ser; simplemente no es visible. -

sin soporte para pointer-events en IE 8,9,10, por lo que no siempre está bien -

Necesita mostrar: ninguno, de lo contrario, se encontrará con el objeto oculto fuera del disparador y se mostrará accidentalmente ... Solo digo :) -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.