Foros del Web » Creando para Internet » CSS »

Problema con rollover

Estas en el tema de Problema con rollover en el foro de CSS en Foros del Web. Tengo un menú sencillito creado con CSS y al tratar de crear el cambio de imagen al pasar el cursor por encima, resulta que en ...
  #1 (permalink)  
Antiguo 21/07/2010, 06:28
 
Fecha de Ingreso: julio-2010
Mensajes: 20
Antigüedad: 7 años, 4 meses
Puntos: 0
Problema con rollover

Tengo un menú sencillito creado con CSS y al tratar de crear el cambio de imagen al pasar el cursor por encima, resulta que en vez de cambiarse esa opción, se me cambia de golpe todo el menú. Soy bastante inexperto y será una tontería pero no la encuentro. Adjunto el CSS para ver si hay algo extraño y si me podéis echar una mano. GRacias

ul.menu
{
text-align:center;
list-style:none;
font-family:"Times New Roman", Times, serif;
padding:4px;
text-align:left;
vertical-align:top;
}
ul.menu li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menurojo1.gif);
display:block;

}
ul.menu:hover li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menuazul1.gif);
display:block;


}
ul.menu ul
{
position:absolute;
left:75px;
top:0px;
display:none;
list-style:none;
}

ul.menu li:hover > ul
{
display:list-item;
}
  #2 (permalink)  
Antiguo 21/07/2010, 13:55
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 8 años, 11 meses
Puntos: 4
Respuesta: Problema con rollover

la primera cosa que veo es que repites las cosas.
en css se heredan los atributos.

ul.menu li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menurojo1.gif);
display:block;

}
ul.menu:hover li
{
background-image:url(../Imagenes/Fondos/fd_menuazul1.gif);
}

no es necesario escribir lo mismo en este caso.

dejanos el html tambien asi lo pruebo porque nose como tienes creada las listas.
o mejor si lo tienes alojado en algun lado dejanosla url

saludos
__________________
www.sandant.com - Blog de Programacion y mucho mas

WWW.SPEDEVIGNER.COM SE DEJARA DE USAR EN UN MES
  #3 (permalink)  
Antiguo 22/07/2010, 04:31
 
Fecha de Ingreso: julio-2010
Mensajes: 20
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Problema con rollover

No, todavía no lo tengo en la web. La lista es esta

<ul class="menu">
<li>Inicio</li>
<li>Noticias</li>
<li>Resultados</li>
<li>Federados
<ul>
<li>Juvenil Masculino</li>
<li>Juvenil Femenino</li>
<li>Cadete Masculino</li>
<li>Cadete Femenino</li>
<li>Infantil Masculino</li>
<li>Infantil Femenino</li>
<li>Alevín Masculino</li>
</ul>
</li>
<li>Escuela
<ul>
<li>Benjamín "A"</li>
<li>Benjamín "B"</li>
<li>Benjamín "C"</li>
<li>Benjamín "D"</li>
<li>Prebenjamín "A"</li>
<li>Prebenjamín "B"</li>
<li>Prebenjamín "C"</li>
<li>Mini</li>
</ul>
</li>
<li>Local
<ul>
<li>Preferente</li>
<li>Primera</li>
</ul>
</li>
<li>Club</li>
<li>Rincón del socio</li>
<li>Sponsors</li>
<li>Enlaces</li>
<li>Contacta</li>
</ul>

Gracias!
  #4 (permalink)  
Antiguo 22/07/2010, 15:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con rollover

Hola:

Sabiendo que es un menú que enlaza distintas opciones, lo que veo es que faltan (en el HTML) precisamente los enlaces a href y en el CSS debes aplicar la pseudoclase :hover al enlace a:hover.

Saludos.


Última edición por jomaruro; 24/07/2010 a las 02:56
  #5 (permalink)  
Antiguo 23/07/2010, 11:39
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: Problema con rollover

no es necesario que sea un enlace para poner el evento hover, solo lo esta asignando mal, tendrias que hacerlo de la siguiente manera.

Código CSS:
Ver original
  1. ul.menu li
  2. {
  3. position:relative;
  4. margin-bottom: 4px;
  5. width:110px;
  6. padding:2px;
  7. background-image:url(../Imagenes/Fondos/fd_menurojo1.gif);
  8. display:block;
  9.  
  10. }
  11. ul.menu li:hover
  12. {
  13. background-image:url(../Imagenes/Fondos/fd_menuazul1.gif);
  14. }
  #6 (permalink)  
Antiguo 24/07/2010, 03:01
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con rollover

Hola:

Cierto, pero también si está usando IE6, la pseudoclase :hover sólo funciona en los enlaces.

Saludos.

  #7 (permalink)  
Antiguo 05/08/2010, 10:30
 
Fecha de Ingreso: julio-2010
Mensajes: 20
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Problema con rollover

Muchas gracias a los dos.
Era como decia "tredio" por la asignación.
Jomaruro: de momento no son enlaces(por eso no tiene lo 'a href'), pero lo serán :)

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 06:50.