Foros del Web » Creando para Internet » CSS »

li:hover

Estas en el tema de li:hover en el foro de CSS en Foros del Web. Hola amigos! He buscado la solucion del cambio de imagen de fondo al pasar el mouse por encima de una lista en IE, pero no ...
  #1 (permalink)  
Antiguo 24/11/2006, 05:28
 
Fecha de Ingreso: agosto-2003
Mensajes: 75
Antigüedad: 14 años, 3 meses
Puntos: 0
li:hover

Hola amigos!
He buscado la solucion del cambio de imagen de fondo al pasar el mouse por encima de una lista en IE, pero no la he encontrado...

Os pongo el codigo a ver si alguien sabe como hacer funcionar esto en IE, porque en mozilla funciona perfecto.

#mimenu {
background-image: url(../imagenes/menu.jpg);
height: 54px;
width: 132px;
top: 0px;
right: 0px;

}
#mimenu ul {
margin: 0px;
padding: 0px;
}

#mimenu li {
background-image: url(../imagenes/menu.jpg);
height: 54px;
width: 132px;
list-style-type: none;
cursor:hand;
text-align:center;
display:block;
}
#mimenu li:hover {
background-image: url(../imagenes/menu_hover.jpg);
height: 54px;
width: 132px;
list-style-type: none;
cursor:hand;
display:block;
}

y el codigo html:

<div id="mimenu">
<ul>
<li>
<a href="#">Menu 1</a>
</li>
</ul>
</div>
  #2 (permalink)  
Antiguo 24/11/2006, 06:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Hay que buscar otra forma

Desgraciadamente el IE actual sólo admite :hover para elementos "a", es decir, para enlaces.
La gente suele resolver esto con una función de javascript. Si el gráfico no es grande, también le puedes engañar de esta manera:

-Añade la clase:

#mimenu a:hover {
background-image: url(../imagenes/menu_hover.jpg);
height: 54px;
width: 132px;
list-style-type: none;
cursor:hand;
display:block;
}

y métele el id al enlace:

<a href="#" id="mimenu">Menu 1</a>

Esto cambia la imagen de fondo sólo cuando pasas sobre el enlace, por lo que te digo que si la imagen es pequeña no se nota mucho, al tocar el enlace casi sin querer, pero si la imagen es grande no cambia hasta que toques el enlace, por lo que no queda muy bien.
Si no te apaña, busca como engañarlo con Javascript.
Mikel.
  #3 (permalink)  
Antiguo 24/11/2006, 10:26
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola vicvallo,

Este es un menú que flota a la izquierda y hace el cambio de imagen que buscas, espero te sirva ahh por cierto sólo tienes que crear las imágenes *.png de 10 x 10 px y listo!...

Código:
div#columna1 {
float : left;
width : 200px;
height : 385px;
margin : 10cm .7em 2cm .9em;
padding : 0;
text-align : left;
}

#columna1 ul {
list-style-type : none;
margin : .4cm 0 0 2.2em;
padding : 2px;
}

#columna1 >ul li {
margin : 0;
padding : 3px;
font-size : 8pt;
font-family : Tahoma, Arial, Verdana, Serif, Symbol;
}

#columna1 >ul li a {
display : block;
text-decoration : none;
width : auto;
height : 17px;
margin : 0;
padding : 2px 0 0 20px;
background : Transparent url(imagenes/vineta_link.png) left no-repeat;
color : #828598;
}

#columna1 >ul li a:hover {
display : block;
width : auto;
height : 17px;
background : Transparent url(imagenes/vineta_hover.png) left no-repeat;
color : #000;
}
Slds y cualquier duda aquí estamos para ayudarte...
__________________
_______
Jorge Rojas.
  #4 (permalink)  
Antiguo 26/11/2006, 07:13
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 841
Antigüedad: 12 años, 8 meses
Puntos: 9
Compañero iconogt .. yo estoy intentando resolver un problema parecido con el tema de rollover sobre LI (usando :hover en CSS).

Me gustaría que pusieras un código sencillo de :hovers sobre LI que funcione en IE, para poder entenderlo y trabajar sobre ello.

Yo he hecho varias pruebas y no he sido capaz... y alguna documentación que he encontrado, me dice lo mismo que comentaba vicvallo, que :hover en IE solo es para elementos del tipo enlace (a).

Espero puedas remitirme ese código que te pido, a fin de poder estudiarlo a fondo.

Un saludo de antemano y gracias.

  #5 (permalink)  
Antiguo 29/11/2006, 12:55
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola el_javi,

Mira, en el codigo que muestro arriba esta mas que claro, pero deja termino de hacer unos pendientes y te hago un ejemplo ok,... mientras puedes checarte esta página http://css.maxdesign.com.au/listamatic/
__________________
_______
Jorge Rojas.
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 12:12.