Estoy tratando de activar el evento mouseEnter cuando el mouse está encima de varios elementos.
Quiero que ambos eventos mouseEnter se activen cuando el mouse esté en el centro, y preferiblemente que ambos se vuelvan amarillos.
Ejecute el fragmento de código siguiente para ver un ejemplo:
<!DOCTYPE html> <html> <head> <style> div:hover { background-color: yellow; } div { width: 100px; height:100px; background:green; border: 2px solid black; } .second { transform:translateX(50%) translateY(-50%); } </style> <script> function onhover(){console.log('hovered')} </script> </head> <body> <div onmouseenter=onhover()></div> <div onmouseenter=onhover() class='second'></div> </body> </html>Según MDN , el evento mouseenter no burbujea, mientras que el evento mouseover sí lo hace. Sin embargo, incluso si SÍ burbujeó, sus elementos actualmente no tienen relación entre sí, por lo que los eventos del mouse son capturados por el elemento superior.
Una posible forma de evitar esto es con la increíble función elementsFromPoint en JavaScript, que resuelve rápidamente su problema:
// Only the IDs of the elments you are interested in const elems = ["1", "2"]; // Modified from https://stackoverflow.com/a/71268477/6456163 window.onload = function() { this.addEventListener("mousemove", checkMousePosition); }; function checkMousePosition(e) { // All the elements the mouse is currently overlapping with const _overlapped = document.elementsFromPoint(e.pageX, e.pageY); // Check to see if any element id matches an id in elems const _included = _overlapped.filter((el) => elems.includes(el.id)); const ids = _included.map((el) => el.id); for (const index in elems) { const id = elems[index]; const elem = document.getElementById(id); if (ids.includes(id)) { elem.style.background = "yellow"; } else { elem.style.background = "green"; } } } div { width: 100px; height: 100px; background: green; border: 2px solid black; } .second { transform: translateX(50%) translateY(-50%); } <div id="1"></div> <div id="2" class="second"></div>Creo que no puedes sin javascript, y con él es un poco complicado, debes verificar en cada movimiento del mouse si las coordenadas del mouse están en el cuadro delimitador del elemento, este relleno falla con elementos con radio de borde pero para el otros esta bien
<script> var hovered=[] function addHover(element){hovered.push(element)} function onhover(element){console.log("hovered",element)} function onCustomHover(e){ hovered.forEach((el,i)=>{ let bounds=el.getBoundingClientRect() if (e.pageX > bounds.left && e.pageX < bounds.bottom && e.pageY > bounds.top && e.pageY < bounds.right ) { onhover(i); } }) } </script> </head> <body> <div id="div1"></div> <div id="div2" class='second'></div> <script> document.body.addEventListener('mousemove', onCustomHover, true);//{capture :false}); addHover(document.getElementById("div1")) addHover(document.getElementById("div2")); </script>Agradecería si pudieras calificar la respuesta si te fue útil porque aún no puedo hacer comentarios <3
Será más fácil cambiar su código un poco.
ex. Agregue a su box clase de elementos div. Agregue a su clase de estilos con el nombre hovered que se verá así:
.hovered { background-color: yellow; } En JS (entre la etiqueta del script) agregue detectores de eventos (código no probado, pero se muestra la idea), también mueva el script al lugar antes de cerrar la etiqueta del body :
const boxes = document.querySelectorAll('.box'); boxes.forEach(box => { box.addEventListener('mouseover', () => { boxes.forEach(b => b.classList.add('hovered')); }); box.addEventListener('mouseout', () => { boxes.forEach(b => b.classList.remove('hovered')); }); });