li:hover

[vicvallo]

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>

[Mikmoro]

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.

[iconogt]

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...

[el_javi]

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.

[iconogt]

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/