Es cierto que IE7 no soporta el hover de li?

August · #1 (**permalink**) 16/09/2006, 15:56

Hola

Es cierto que IE7 no soporta el hover de li?

Alguien me dijo en este foro, pero la verdad no lo puedo creer tantas cosas hechas en XHTML que usan esto, y que ya no se pueda usar, seria como quitar el atributo src de las Imagenes

Alguien lo ha comprobado?

juan romero · #2 (**permalink**) 20/09/2006, 06:00

Lo acabo de probar y si funciona con IE7

frijolerou · #3 (**permalink**) 20/09/2006, 11:37

Augusto, creo que no me entendiste bien cuando preguntaste esto en otro foro. Lo que yo dije fue que hasta la versión 6 de Internet Explorer, la pseudoclase :HOVER sólo tenía efecto sobre un elemento <A> (hipervínculo). Y que en IE 7 iba a cambiar (es decir, :hover funcionaría sobre otros elementos) aunque muy seguro no estaba.

miguelelinventor · #4 (**permalink**) 18/06/2008, 06:19

Buenas tengo una pagina web con un menu con listas que funciona con :hover para aparecer el submenu ya saveis.... en ie6 no me funcionaba, le inserté unas lineas de codigo en el head de googlecode creo y me funciono y lo pruebo con ie7 quuuu de veria funcionar sin problemas y no lo hace que puede pasar? el codigo es maas o menos asi:

HTML:
<ul id="menu">
<li>
<div>menu1</div>
<ul>
<li><a href="#">submenu1</a></li>
</ul>
</li>
</ul>

CSS:
ul#menu li ul li {
visibility:hidden;
}
ul#menu li:hover ul li{
visibility:visible;
}

¿Que puede estar mal?

salu2

daPhyre · #5 (**permalink**) 18/06/2008, 11:12

La verdad este código me ha desconcertado bastante. Yo se que debería poderse, ya le he movido bastantes cosas para dejarlo similar a uno que antes tenía, pero simplemente no puedo lograr que quede. A ver si alguien que sepa más pueda ayudarnos.

Mikmoro · #6 (**permalink**) 18/06/2008, 11:27

Pues no sé, pero a mi me funciona en IE7 perfectamente:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
ul#menu li ul li {
visibility:hidden;
}
ul#menu li:hover ul li{
visibility:visible;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<div>menu1</div>
<ul>
<li><a href="#">submenu1</a></li>
</ul>
</li>
</ul>
</body>
</html>

Mikel.

daPhyre · #7 (**permalink**) 18/06/2008, 11:41

Me acabo de dar cuenta que es el DOCTYPE!!!! oO

Aun sin el html, head, body, etc, me funciona:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
#menu li ul{visibility:hidden;}
#menu li:hover ul{visibility:visible;}
</style>

<ul id="menu">
<li><a href="#">menu1</a>
<li><a href="#">menu2</a>
 <ul>
 <li><a href="#">submenu1</a></li>
 <li><a href="#">submenu2</a></li>
 </ul>
</li>
<li><a href="#">menu3</a>
</ul>

Pero borrandole tan solo la primer línea, ya no hay forma de que funcione.

PD: ¿No sería mejor usar un display:none y display:block? Queda un espacio en blanco, y no se si así se quiera, pero yo no lo veo muy atractivo =P

miguelelinventor · #8 (**permalink**) 21/06/2008, 07:56

¿Para que sirve exactamente el DOCTYPE? yo le tengo metio unos javascript que se cargan de googlecode para solucionar lo de :hover en ie6 y solucionaba problemillas del 7 pero lo de DOCTYPE nuse para que es

.

Bueno voy a probar como instalarme el ie7 en wine o algo asi para probarlo ave si funciona.

Gracias y salu2.

miguelelinventor · #9 (**permalink**) 21/06/2008, 10:40

Vale le insertado el DOCTYPE y funciona pero cuando pongo el cursor por encima del submenu tambien se hace visible.

Alguna solucion?

quizas la solucion más adecuada sería hacer el menu en javascript pero aprobechando la lista ul li.... nuse nuse

miguelelinventor · #10 (**permalink**) 21/06/2008, 11:48

Menu con javascript mucho más fiable y estandar que con css.

1 <html>
2 <head>
3
4 ^I<style>
5 ^I^I#submenu {
6 ^I^I^Ivisibility:hidden;
7 ^I^I^Ilist-style-type:none;
8 ^I^I^Ibackground-color:#adbfbd;
9 ^I^I^Iwidth:80px;
10 ^I^I}
11 ^I^I#submenu2 {
12 ^I^I^Ivisibility:hidden;
13 ^I^I^Ilist-style-type:none;
14 ^I^I^Ibackground-color:#adbfbd;
15 ^I^I^Iwidth:80px;
16 ^I^I}
17 ^I^I#menu {
18 ^I^I^Ilist-style-type:none;
19 ^I^I^Ibackground-color:#00bfbd;
20 ^I^I^Iwidth:40px;
21 ^I^I^Iheight:10px;
22 ^I^I}
23 ^I^I#menu2 {
24 ^I^I^Ilist-style-type:none;
25 ^I^I^Ibackground-color:#00bfbd;
26 ^I^I^Iwidth:40px;
27 ^I^I^Iheight:10px;
28 ^I^I}
29 ^I</style>
30
31 ^I<script>
32 ^I^Ifunction mostrar(nombreObjeto){
33 ^I^I^Idocument.getElementById(nombreObjeto).style. visibility="visible";}
34 ^I^Ifunction ocultar(nombreObjeto){
35 ^I^I^Idocument.getElementById(nombreObjeto).style. visibility="hidden";}
36 ^I</script>
37
38 </head>
39 <body>
40
41 ^I<ul id="menu">
42
43 ^I^I<li>
44 ^I^I^I<div id="menu" onMouseOver="mostrar('submenu'),ocultar('submenu2' )">Menu</div>
45 ^I^I^I<ul onMouseOut="ocultar('submenu')">
46 ^I^I^I^I<li id="submenu"><a href="#">submenu1</a></li>
47 ^I^I^I</ul>
48 ^I^I</li>
49
50 ^I^I<li>
51 ^I^I^I<div id="menu2" onMouseOver="mostrar('submenu2'),ocultar('submenu' )">Menu2</div>
52 ^I^I^I<ul onMouseOut="ocultar('submenu2')">
53 ^I^I^I^I<li id="submenu2"><a href="#">submenu2</a></li>
54 ^I^I^I</ul>
55 ^I^I</li>
56
57 ^I</ul>
58
59 </body>
60 </html>

miguelelinventor · #11 (**permalink**) 21/06/2008, 14:21

Los li de submenu se tienen que meter una una capa <div> porque sino cuando pasas de un li a otro desaparece un pequeño error

salu2

Mikmoro · #12 (**permalink**) 21/06/2008, 15:43

Cita:

Iniciado por miguelelinventor

Menu con javascript mucho más fiable y estandar que con css.

¿Más fiable y standard?
1.- Fiable si tienes activado javascript
2.- ¿Más standard que CSS? No
3.- ¿Tan fiable que los li del segundo nivel se tienen que meter en un div?

En definitiva, una afirmación categórica poco acertada, ¿no?

Mikel.

miguelelinventor · #13 (**permalink**) 23/06/2008, 00:21

Bueno para gustos colores, en mi caso css me ha dado problemas y pienso que con javascript los menus funcionan mejor, lo de meter los li en un div es porque cuando pasas de un li a otro interpreta que se sale y desaparecia el submenu. Meter los li en una capa no me ha dado ningun problema, lo de estandar me referia porque hover no funciona de igual manera en todos los navegadores.CSS:hover me ha dado problemas que solo con JavaScript ha podido solucionar.

Quizas me precipité a la hora de poner fiable y estandar...

salu2

Mikmoro · #14 (**permalink**) 23/06/2008, 00:25

Ningún problema

Si los li debes meterlos en un div pierden todo su sentido, así que bastaría con el div para darle forma. De hecho no es correcto ni válido:

<ul>
<div><li>...</li></div>
<div><li>...

CSS no es problemático en sí mismo, sino a causa de su interpretación principalmente de explorer. Todo se trata de cogerle el truco

Mikel.