0
154
VistasOptimización de Javascript Event Listener varias veces el mismo efecto
Quiero algo que cuando tenga un addEventListener('mouseover') afecte a los dos elementos junto a él.
Como esto:
let three = document.getElementById('three'); let six = document.getElementById('six'); intersection3_6.addEventListener("mouseover", function () { three.classList.add("hover"); six.classList.add("hover"); }); intersection3_6.addEventListener("mouseout", function () { three.classList.remove("hover"); six.classList.remove("hover"); }); #table { display: grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; } #controls { position: absolute; height: 100%; width: 100%; display: grid; grid-template-columns: 44px 12px 44px; grid-template-rows: 50px; pointer-events: none; } #intersection3_6 { pointer-events: all; background-color: red; grid-column-start: 2; } .hover { background-color: aqua; } <div id="table"> <button id="three"><span>3</span></button> <button id="six"><span>6</span></button> <div id='controls'> <div class='vertical' id='intersection3_6'></div> </div> </div>
¿Hay alguna manera de decir algo como 'toma el de tu izquierda y el de tu derecha y hazlo'?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Recorra todos los elementos con la misma clase y use las operaciones de navegación DOM para llegar a los elementos junto al destino del evento.
document.querySelectorAll(".vertical").forEach(int => { int.addEventListener('mouseover', (e) => { let table = e.target.parentElement.parentElement; table.childElements[0].classList.add('hover'); table.childElements[1].classList.add('hover'); }); int.addEventListener('mouseout', (e) => { let table = e.target.parentElement.parentElement; table.childElements[0].classList.remove('hover'); table.childElements[1].classList.remove('hover'); }); });
·
Juan Pablo Isaza
Denunciar
Responde la pregunta