2

Tengo una lista li cargado con innerHTML, el cual quiero darle una clase a cada uno con el evento onmouseenter.

Esto me funciona bien pero con el evento del teclado, pero no asi con el evento mouseenter.

Este es mi uso del evento mouseenter que no me funciona (ni con mouseover):

userOpcionAll.forEach( (e) => {

e.addEventListener("mouseenter", (ev) => { 
    let active = document.querySelector(".opcion.activo");
    active.classList.toggle("activo");
    active = ev.target;
    active.classList.toggle("activo");
});

});

const userSelect = document.getElementById("userSelect");
const userOpciones = document.getElementById("userSelect-opciones");
const userOpcionAll = userOpciones.querySelectorAll(".opcion");

function cargaOptionsUser() { // Carga de option en form user

  const opcUserPais = [{
    pais: "Argentina",
    codigo: "+54",
    value: "0000 000 000",
    regular: /^([0-9]{10})$/,
    bandera: "src/banderas/ar.png"
  }, {
    pais: "Bolivia",
    codigo: "+591",
    value: "0 000 0000",
    regular: /^([0-9]{8})$/,
    bandera: "src/banderas/bo.png"
  }, , {
    pais: "Brasil",
    codigo: "+55",
    value: "00 00000 0000",
    regular: /^([0-9]{11})$/,
    bandera: "src/banderas/br.png"
  }, {
    pais: "Chile",
    codigo: "+56",
    value: "0 0000 0000",
    regular: /^([0-9]{9})$/,
    bandera: "src/banderas/cl.png"
  }, {
    pais: "Paraguay",
    codigo: "+595",
    value: "000 000 000",
    regular: /^([0-9]{10})$/,
    bandera: "src/banderas/py.png"
  }, {
    pais: "Uruguay",
    codigo: "+598",
    value: "0 000 0000",
    regular: /^([0-9]{8})$/,
    bandera: "src/banderas/uy.png"
  }, ];

  let opciones = [];

  opcUserPais.forEach((item) => {
    opciones += `
            <li class="opcion" value="${item.value}" data-txt="${item.pais}">
                <img src="${item.bandera}"> <span>${item.pais}:</span> (${item.codigo})
            </li>
        `;
  });

  userOpciones.innerHTML += opciones;
};

function usuarioSelect() {

  userOpciones.classList.toggle("activo");

  if (userOpciones.classList.contains("activo")) {

    userOpciones.addEventListener("mouseleave", yoDesseleccion);

  } else yoDesseleccion();

  function yoDesseleccion() {
    userOpciones.classList.remove("activo");
  };

};

userOpcionAll.forEach((e) => {

  e.addEventListener("mouseenter", (ev) => {
    let active = document.querySelector(".opcion.activo");
    active.classList.toggle("activo");
    active = ev.target;
    active.classList.toggle("activo");
  });

});

document.addEventListener("DOMContentLoaded", () => {
  cargaOptionsUser(); // Cargar etiqueta option en formulario User
});

userSelect.addEventListener("click", usuarioSelect);

window.addEventListener("keydown", (e) => {

let activo = userOpciones.classList.contains("activo");
let active = userOpciones.querySelector("ul li.activo");
  
if(e.key == "ArrowUp" && activo) {
    
    e.preventDefault();
    active.classList.toggle("activo");
    active = active.previousElementSibling || active.parentNode.lastElementChild;
    active.classList.toggle("activo");

} else if(e.key == "ArrowDown" && activo) {

    e.preventDefault();
    active.classList.toggle("activo");
    active = active.nextElementSibling || active.parentNode.firstElementChild
    active.classList.toggle("activo");

} // else if(e.key == "Enter" && activo) yoSelectCódigo();
});
:root {
  --textoPeque: .80em;
  --azul: rgb(13 110 253);
  --gris: rgb(128 128 128);
  --negro: rgb(0 0 0);
  --blanco: rgb(255 255 255);
  --fondoGris: rgba(128 128 128 / 0.5);
  --fondoVerde: rgba(16 88 55 / 0.5);
  --gris-20rem: 0 0 0 .20rem var(--fondoGris);
  --azul-5: 0 0 .25rem var(--azul);
  --transicionNormal: all 0.2s ease-in-out;
  --blur2: 2px;
}

.btn {
  display: inline-block;
  position: relative;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: var(--transicionNormal)
}

.btn-gris {
  color: var(--negro);
  border-color: var(--gris);
  background-color: var(--gris)
}

.btn-gris:hover {
  color: var(--negro);
  box-shadow: var(--gris-20rem);
  background-color: var(--gris)
}

.userSelect .userSelect-opciones {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  max-width: 185px;
  max-height: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-10-rem);
  overflow-y: auto;
  pointer-events: none;
  background: var(--fondoGris);
  backdrop-filter: blur(var(--blur2));
  transition: var(--transicionNormal)
}

.userSelect .userSelect-opciones.activo {
  max-height: 300px;
  pointer-events: all
}

.userSelect .userSelect-selecto {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.userSelect .userSelect-selecto span {
  display: none
}

.userSelect-opciones .opcion {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  padding: .30rem .30rem;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: var(--textoPeque);
  color: var(--blanco);
  text-shadow: var(--azul-5)
}

.userSelect .userSelect-selecto img,
.userSelect-opciones .opcion img {
  width: 25px;
  height: 15px;
  object-fit: cover;
  margin-right: 5px
}

.userSelect-opciones .opcion.activo {
  color: var(--enlace);
  background-color: var(--fondoVerde)
}
<button type="button" id="userSelect" class="btn btn-sm btn-gris userSelect"> 
                                            <div id="userSelect-selecto" class="userSelect-selecto">
                                                Seleccionar
                                            </div>
                                            <ul id="userSelect-opciones" class="userSelect-opciones">
                                                <li class="opcion activo">Seleccionar</li>
                                            </ul>
                                        </button>

1 respuesta 1

2

Cuando defines:

  const userOpcionAll = userOpciones.querySelectorAll(".opcion");

Aun no se han cargado los <li> que agregas con la funcion cargaOptionsUser(), ese selector solo tomara los que ya tengas definido en el documento HTML.

Mueve tanto la definición del selector como el forEach que agrega el evento 'mouseenter' a cada <li>, al evento 'DomContentLoaded':

document.addEventListener("DOMContentLoaded", () => {
  cargaOptionsUser(); // Cargar etiqueta option en formulario User
  const userOpcionAll = userOpciones.querySelectorAll(".opcion");
  userOpcionAll.forEach((e) => {
  e.addEventListener("mouseenter", (ev) => {
    let active = document.querySelector(".opcion.activo");
    active.classList.toggle("activo");
    active = ev.target;
    active.classList.toggle("activo");
    });
  });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.