Aplicar transition a partir de otro elemento.

[RAZGRIZ24]

Buenas compis! pues la duda la verdad es bastante simple pero no sé como solucionarlo. Tengo lo siguiente:

Código:

.header-ul{
	display:block;
	float:left;
	margin:0;
	padding:0;
	z-index:100;
	position:relative;
}
[...]
.header-li{
	list-style:none;
	display:none;
	z-index:100;
}
[...]
ul.header-ul:hover li{
	display:block;
}

El problema lo tengo con el fragmento de código que os estoy mostrando, como veis en la última regla, cambio el display del li. Eso es correcto, pero querría que ese display tuviera una transición (o un retraso, la verdad es que aún tengo que probar ambos efectos) de 0.5s al situar el ratón sobre el elemento 'ul'

Es la primera vez que busco hacer un transition a partir de otro elemento ¿Cómo puedo hacerlo?

[pzin]

Podrías hacerlo con:

Código CSS:

.header-ul:hover .header-li {
  transition-delay: .5s;
}
 

Pero no te va a funcionar, ya que no se pueden hacer transiciones si el elemento cambia a display: none. Tendrás que jugar visibility, opacity o incluso hacer alguna otra cosa, dependiendo de qué quieras hacer exactamente.

[RAZGRIZ24]

Iniciado por pzin

Podrías hacerlo con:

Código CSS:

.header-ul:hover .header-li {
  transition-delay: .5s;
}
 

Pero no te va a funcionar, ya que no se pueden hacer transiciones si el elemento cambia a display: none. Tendrás que jugar visibility, opacity o incluso hacer alguna otra cosa, dependiendo de qué quieras hacer exactamente.

Bueno pues puedo jugar con visibility y transition-delay, no tengo mayor problema con eso la verdad.

Pero sí querría saber cómo, mediante css, hacer la transición de "li" cuándo realizo el hover sobre "ul"

[TommyGun]

Cambia el header-li a display: block;.
Agregale opacity: 0; y filter: alpha(opacity=0);

Ahí ya lo vas a tener en invisibles aunque te van a ocupar lugar, podés hacer un position: absolute; para que no aparezca en el lugar donde están, ya que estará flotando.

Allí al final, en el hover, le aplicás opacity: 1.0; y filter: alpha(opacity=100);

Entonces te quedaría:

Código CSS:

.header-li{
    list-style:none;
    display: block;
    z-index:100;
        opacity: 0;
       filter: alpha(opacity: 0);
       position: absolute;
       -webkit-transition: opacity 0.5s 0.5s linear; /* Esto va a ser que tarde 500ms en activarse  y 500ms entre que va cambiando de opacidad 0 a opacidad 100. El primer valor es el tiempo de transición, el segundo es el delay. */
       -moz-transition: opacity 0.5s 0.5s linear;
       transition: opacity 0.5s 0.5s linear;
}
[...]
ul.header-ul:hover > ul.header-li{
    opacity: 1.0;
       filter: alpha(opacity=100);
}
 

No lo probé pero casi seguro que funciona bien, igualmente espero tu respuesta :D