:hover para el p*** IE

Citar

Escrito el 26 Sep 2007 10:37 am

Buenas, estoy intentando hacer un menu desplegable con listas, todo perfecto en FF, pero al abrir con el P*** ie no me funcionan los :hover. He buscado y rebuscado los hacks para que funcione, pero no encuentro el fallo.
Fijaos que defino todos los estilos de las listas sobre el div con id=menuz, en lugar de llamar al id de <ul> como ya he visto por ahí, ¿puede estar ahí el error? ¿Interpreta igual la funcion llamando al div?
A ver, si me pudieran ayudar, ahí les dejo los codigos (parte):

El html:

Código :

<body> 
    <div id="menuz">
       <ul><b>Categorías</b>
           <li><a href="#">CABLES / CONEXIONES</a>
               <ul>
                   <li><a href="#">ADAPTADORES</a></li>
                    <li><a href="#">BOBINAS DE CABLE</a></li>
                    <li><a href="#">CONECTORES</a></li>
                    <li><a href="#">CONEXIONES</a>
                       <ul>
                           <li><a href="#">AUDIO</a></li>
                            <li><a href="#">FIBRA OPTICA</a></li>
                            <li><a href="#">ILUMINACION</a></li>
                            <li><a href="#">TELEFONO</a></li>
                            <li><a href="#">VIDEO</a></li>
                        </ul>
                     </li>
                 </ul>
          </ul>
</div>

Los estilos

Código :

#menuz {
   background-image:url(Mascara.gif);
   background-repeat: no-repeat;
   position: absolute;
   top: 274px;
   width: 268px;
   height: 620px;
   z-index: 0;
}

#menuz ul {
   width: 12em;
   margin:0;
   padding:0;
   list-style:none;
   text-align: center;
   border: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { height: 1%; }
* html ul li a { height: 1%; }
/* End */

#menuz li {
   width: 13em;
   position: relative;
   margin:0px !important;
   margin:-3px;
   left:1em;
   font-weight:bold;
   line-height: 0.85em !important;
   line-height: 0.7em;
}

#menuz li a {
   text-decoration: none;
   text-align: left;
   color:#999900;
   display: block;
}

#menuz li ul a {
   font-weight: lighter;
   color: #444444;
   }
   
#menuz li ul ul a {
   color: #666666;
   position:relative;
   left:1em;
   }
   
#menuz li a:hover {
   color: #FFFFFF;
   background-color: #FF6600;
}

#menuz li ul {
   display: none;
   position: relative;
   }

#menuz li>ul { /*LAS POSICIONES DE LAS OPCIONES DEL SUBMENU*/
   top:auto;
   left:auto;
   }
      

#menuz ul ul,
/*#menuz ul li:hover ul ul
#menuz ul ul li:hover ul ul ANT LINEA AÑADIR COMA */
{display: none;}

#menuz ul li:hover ul,
#menuz ul ul li:hover ul,
#menuz ul ul ul li:hover ul
{display: block;}

El js:

Código :

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menuz");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Por INdalX

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Sep 2007 04:24 pm

Busca en google "hover behaviour internet explorer", es mejor con un archivo .htc (ie behaviours)

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino

Envíale un mensaje privado Email Web

Barcelona

Citar

Escrito el 27 Sep 2007 04:42 am

Prueba con esto.

Código :

#menuz ul li:hover ul, #menuz ul li.hover ul, 
#menuz ul ul li:hover ul, #menuz ul ul li.hover ul,
#menuz ul ul ul li:hover ul, #menuz ul ul ul li.hover ul
{display: block;}

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 28 Sep 2007 10:24 am

frenadoll, gracias por la ayuda. He probado con los ie behaviours, añadiendo esta linea a los estilos:

Código :

li {
   behavior: url(img/hover.htc );
}

Y este es el contenido de la funcion en el hover.htc

Código :

<attach event="onmouseover" handler="hoverRollOver" />
<attach event="onmouseout" handler="hoverRollOff" />
<script type="text/javascript">
//
//   Simple behaviour for IE5+ to emulate :hover CSS pseudo-class.
//  Version 1.0
//
//  Manual at: http://www.hszk.bme.hu/~hj130/css/list_menu/hover/
//  
//  bugfix after 0.1: in hoverRollOff function if() added
//

function hoverRollOver() {
   element.origClassName = element.className;   // backup origonal className
   var tempClassStr = element.className;      
   tempClassStr += "Hover";               // convert name+'Hover' the last class name   to emulate tag.class:hover
   tempClassStr = tempClassStr.replace(/\s/g,"Hover ");   //convert name+'Hover' the others to emulate tag.class:hover
   tempClassStr += " hover";            // add simple 'hover' class name to emulate tag:hover
   element.className = element.className + " " + tempClassStr; 
   //window.status = element.className;      // only for TEST
}
function hoverRollOff() {
   if(element.origClassName) element.className = element.origClassName; 
}

</script>

Lo descargue de esta pagina por si a alguien mas le sirve o pudiera hacerlo funcionar: http://users.hszk.bme.hu/~hj130/css/list_menu/hover/
NEO_JP, esos estilos solo funcionan para FF, pero mi problema es hacerlo funcionar en IE tambien, seguramente tenga algun error en el js al llamar al Element.
AYUDA, please!!

Por INdalX

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 28 Sep 2007 10:42 am

Me ha funcionado en IE!! Pero solo he conseguido que se despliegue el menu, ahora como hago para que se vuelva a plegar? He añadido estas lineas a los estilos:

Código :

#menuz ul li.hover ul,
#menuz ul ul li.hover ul,
#menuz ul ul ul li.hover ul
{display: block;}

li {
   behavior: url(img/hover.htc );
}

PArece una buena solucion para emular el :hover en explorer, pero haber si me ayudais a completar el codigo para que se cierre el menu en onmouseout.
Gracias por adelantado

Por INdalX

6 de clabLevel

Envíale un mensaje privado

:hover para el p*** IE

Escribe una respuesta rapida