Soy relativamente nueva en JavaScript.

Busqué en Internet y descubrí lo que la gente llama soluciones y corrige scripts y arreglos, etc., pero ninguno de ellos parece funcionar para mí, así que claramente me falta algo. He estado solucionando problemas por horas ahora. ¡Por favor ayuda!

CSS: he creado un div simple de dos columnas (de 12, flota a la izquierda). Tengo una transición CSS en su lugar para tirar de 2% de ancho a 15% de ancho (casi las dos columnas completas) al pasar el mouse.

HTML: he creado algunos enlaces de prueba en el div que he ocultado con una clase CSS.

JS: Estoy tratando de usar JavaScript para hacerlos visibles cuando el mouse está sobre el div.

Html:

<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>

Css:

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

Js:

var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
function makeVisible() {
  popoutlinks.style.visibility="visible";
}

Por lo que vale, también he intentado document.getElementsByClassName(menulinks").style.visibility="visible"; sin suerte y he intentado lograr lo mismo usando opacidad en lugar de visibilidad y eso no hizo ninguna diferencia.

Gracias.

0
Josh 25 feb. 2018 a las 03:21

3 respuestas

La mejor respuesta

Si desea alternar la visibilidad de los enlaces dependiendo de si el menú se muestra o no. Puedes hacerlo así;

Js:

<script>
var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
linkpop.addEventListener("mouseout", makeVisible);

function makeVisible() {
  for (let i = 0; i < popoutlinks.length; i++) {
    popoutlinks[i].classList.toggle("vis");
  }
}
</script>

El método 'alternar' de 'classList' que está vinculado a un elemento agregará o eliminará la clase del elemento dependiendo de su estado actual. Si la clase está allí, la eliminará; de lo contrario, la agregará. Muy útil para menús emergentes como este. Tenemos que recorrer todos los elementos, en este caso su menulinks y alternar la clase por elemento.

Luego tenga una clase para activar o desactivar. El estado predeterminado está vinculado a la clase predeterminada que desea para el elemento.

Css:

.menulinks { visibility:hidden; }
.vis { visibility:visible }
0
JokerDan 25 feb. 2018 a las 00:40

No hay necesidad de JavaScript.

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

.popout:hover .menulinks {
  visibility: visible;
}
<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>
1
bfl 25 feb. 2018 a las 00:45

Debe recorrer los elementos DOM:

getElementsByClassName

Devuelve un objeto tipo matriz de todos los elementos secundarios que tienen todos los nombres de clase dados. Cuando se llama al objeto del documento, se busca el documento completo, incluido el nodo raíz. También puede llamar a getElementsByClassName () en cualquier elemento; solo devolverá elementos que sean descendientes del elemento raíz especificado con los nombres de clase dados.

function makeVisible() {
  popoutlinks.forEach(function(e) {
      e.style.visibility="visible";
  });   
}
0
Ele 25 feb. 2018 a las 00:30