0

Buen día,

Tengo la siguiente duda,

supongamos que tengo una estructura como esta:

<div id=bloque1>
  <ul>
    <li> <a href=#>opcion1</a> </li>
    <li> <a href=#>opcion2</a> </li>
  </ul>
</div>


<div id=bloque2>
<p>lorem ipsum dolor sit amet</p>
</div>

Si yo quisiera por ejemplo que al pasar el mouse sobre la unordered list pase X cosa en un item dentro de la list (ej: que cambie el color del texto), puedo usar:

ul:hover > li a {color:red}

Pero cómo haría para trabajar con algo que está, no dentro del mismo "ul" al que le hago hover, sino para trabajar con algo del div "bloque2", por ejemplo cambiarle el color al parrafo del bloque2, cuando alguien haga Hover en la UL del bloque 1.

Gracias.

1
  • Respuesta corta: no se puede. Respuesta larga: depende del div contenedor y como se ajusta la lista dentro del mismo, se podría simular poniendo el :hover en el div en lugar del ul (cómo indica Johan en su respuesta). Esto es así porque CSS no tiene selector padre, y aunque se sugirió un como parte de los selectores de nivel 4 (parte del estándar aunque ningún navegador realmente lo aplica), no serviría en este caso porque el bloque 2 no está en la misma rama que el ul. Hay alguna pregunta en el sitio sobre este tema, voy a buscar y la enlazo.
    – Alvaro Montoro
    el 8 jul. 2018 a las 18:58

1 respuesta 1

3

Puedes utilizar el combinador ~ que separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

#bloque1:hover ~ #bloque2 {
	color: red
}
<div id=bloque1>
  <ul>
    <li> <a href=#>opcion1</a> </li>
    <li> <a href=#>opcion2</a> </li>
  </ul>
</div>


<div id=bloque2>
<p>lorem ipsum dolor sit amet</p>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.