Duda sobre rollover

[albert84]

Hola, tengo el siguiente problema y buscando por el foro no he encontrado nada, algun caso que se le parece pero no es exactamente igual, a ver si me podeis ayudar.

Tengo el siguiente codigo:

Código:

<ul>
	<li class="elementoLista">
		<div class="fondo">Texto</div>
		<div class="menuOculto"></div>
	</li>
</ul>


.elementoLista{
	background-color:white;
}
.elementoLista:hover{
	background-color:blue;
}

.fondo{
	height:25px;
	width:25px;
	background: url('./img/fondo.jpg') no-repeat;
}
.fondo:hover{
	background: url('./img/fondo.jpg') no-repeat 0px 25px;
}

.menuOculto{
	display: none;
}
.menuOculto:hover{
	display: block;
}

Quiero conseguir que cuando pase el reton encima de la clase elementoLista, es decir: .elementoLista:hover, tambien se activen los hover de fondo y menuOculto, es posible solo con CSS?

Con JS lo sabria hacer, pero me gustaria conseguir este efecto usando simplemente CSS si es posible, me gustaria saber como.

Muchas gracias.

[PrendekZ]

Claro que se puede, HTML:

<ul>
<li class="elementoLista">Probando
<div class="fondo">Texto</div>
<div class="menuOculto">Menu oculto</div>
</li>
</ul>

CSS:

*{margin:0; padding:0; border:0; outline:0; list-style:none;}
li.elementoLista{background:#ccc; width:100px; position:relative; text-align:center; color:#333; padding:10px 0; margin:30px;}
li.elementoLista div{position:relative; border-top:1 px solid #999; display:none;}
li.elementoLista:hover div{display:block;}

Todo debe estar dentro de la etiqueta LI que quieres mostrar al hacer el hover, cómo se muestra el código HTML.

Saludos!

[albert84]

Muchas gracias me ha funcionado.

[PrendekZ]

Si tienes más inquietudes sobre CSS puedes publicarla que yo o cualquier compañero te podemos ayudar.

Yo preferiria Javascript ya que da efectos muy buenos, pero también es bueno saber como hacerlo con CSS!

PD: Bienvenido al foro.

Saludos!