Tema: Duda al desplegar un menú
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/08/2013, 19:31
Checho360
 
Fecha de Ingreso: marzo-2011
Mensajes: 94
Antigüedad: 13 años, 7 meses
Puntos: 3
Duda al desplegar un menú
Hola. Estoy empezando a meterme en el mundillo de html, css y javascript y estoy teniendo algún que otro problema xD. Ahora mismo en concreto, no entiendo por qué al pasar el ratón por encima de "Galeria", no muestra "Galeria2" y al quitarlo lo vuelve a ocultar (esa es mi intención por lo menos jaja). Os dejo el código para que le echéis un vistazo a ver si me podéis ayudar, espero que no esté muy caótico jaja. Un saludo y gracias!!!

Código Javascript: 
Ver original
  1. addEventListener ("load", probando);
  2.  
  3. function probando (){
  4.     
  5.     var nav1 = document.querySelectorAll("#barra_navegacion li");
  6.     
  7.     nav1[1].addEventListener ("mouseon", despliega( document.querySelectorAll("#barra_navegacion_prueba")[0] ));
  8.     nav1[1].addEventListener ("mouseout", repliega( document.querySelectorAll("#barra_navegacion_prueba")[0] ));
  9.     
  10.     function despliega (elem){
  11.         
  12.        elem.style.visibility = "visible";
  13.         
  14.     }
  15.     
  16.     function repliega (elem){
  17.         
  18.         elem.style.visibility = "hidden";
  19.         
  20.     }
  21.     
  22. }

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2.  
  3. <html lang="es">
  4.     
  5.     <head>
  6.         
  7.         <link rel="stylesheet" href="estilos.css">
  8.         <script src="scripts.js"></script>
  9.         <meta charset="utf-8">
  10.         
  11.     </head>
  12.     
  13.     <body>
  14.         
  15.         <div id="cajaPrincipal">
  16.         
  17.             <header id="encabezado">
  18.  
  19.                 <span>Prueba de script</span>
  20.  
  21.             </header>
  22.  
  23.             <nav id="barra_navegacion">
  24.  
  25.               <ul>
  26.                     
  27.                     <li>Inicio</li>
  28.                     <li>Galeria
  29.                         
  30.                         <div id="barra_navegacion_prueba">Galeria2</div>
  31.                         
  32.                         
  33.                     </li>
  34.                     <li>Contacto</li>
  35.                     <li>Ubicacion</li>
  36.                     <li>Clientes</li>
  37.                     
  38.                 </ul>
  39.  
  40.             </nav>
  41.  
  42.             <section>
  43.  
  44.                 <script>
  45.  
  46.  
  47.  
  48.                 </script>
  49.  
  50.             </section>
  51.             
  52.         </div>
  53.         
  54.     </body>
  55.     
  56. </html>

Código CSS: 
Ver original
  1. #cajaPrincipal{
  2.     
  3.     margin: auto;
  4.     
  5. }
  6.  
  7. #encabezado{
  8.     
  9.     display: block;
  10.     width: auto;
  11.     background: #BDBDBD;
  12.     text-align: center;
  13.     color: #000000;
  14.     font-size: 30px;
  15.     border: 1px solid #000000;
  16.     border-radius: 5px;
  17.     margin: 20px;
  18.     
  19. }
  20.  
  21. #barra_navegacion{
  22.     
  23.     color: #0101DF;
  24.     border: 1px solid #000000;
  25.     text-align: center;
  26.     
  27. }
  28.  
  29. #barra_navegacion li {
  30.     
  31.     display: inline-block;
  32.  
  33. }
  34.  
  35. #barra_navegacion_prueba{
  36.     
  37.     visibility: hidden;
  38.  
  39. }

Mi intención es que tengo un menú compuesto por Inicio, Galeria... y Galeria2 que a priori está en hidden. Añado un event listener y cuando el ratón esté por encima de Galeria, entonces cambia el valor de Galeria2 a visible, pero cuando quito el ratón, lo detecta y lo vuelve a ocultar. No sé por qué pero el resultado es que lee la última instrucción como si el ratón lo tuviera siempre quitao y está siempre hidden.

Muchísimas gracias!!
Última edición por Checho360; 30/08/2013 a las 19:36