Foros del Web » Creando para Internet » CSS »

Duda sobre rollover

Estas en el tema de Duda sobre rollover en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 11/01/2011, 04:03
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 6 años, 11 meses
Puntos: 0
Duda sobre rollover

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.
  #2 (permalink)  
Antiguo 11/01/2011, 06:22
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Duda sobre rollover

Claro que se puede, HTML:

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

Cita:
*{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!
  #3 (permalink)  
Antiguo 11/01/2011, 06:31
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Duda sobre rollover

Muchas gracias me ha funcionado.
  #4 (permalink)  
Antiguo 11/01/2011, 08:07
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Duda sobre rollover

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!

Etiquetas: rollover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:35.