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>