Tengo un requisito pero realmente no sé cómo implementarlo. Los requisitos son los siguientes:
cuando el mouse se mueve al bloque rojo, el div azul se puede abrir, pero el bloque no se puede cerrar cuando el mouse opera dentro del div azul, pero mientras el mouse deja el bloque azul, el div azul desaparece,
Realmente no sé cómo implementarlo, espero poder obtener su ayuda, gracias.
let hover = document.querySelector('.hover'); let wrap = document.querySelector('.wrap'); let hover1 = hover.offsetLeft; let hover2 = hover.offsetTop; let hover3 = hover.offsetLeft; let hover4 = hover.offsetWidth; document.addEventListener('mousemove', function(e) { //.... }); body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .demo { position: relative; } .hover { font-size: 30px; font-weight: 900; color: blue; border: 2px solid #222; color: #fff; cursor: pointer; background-color: red; } .wrap { position: absolute; top: 80px; width: 120px; padding: 10px; background-color: blue; color: #fff; border: 2px solid #222; display: none; } <div class="demo"> <p class="hover">hover goin</p> <div class="wrap"> <h2>title</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo modi quasi </p> </div> </div>Suponiendo que haya entendido su objetivo, no necesita JS/jQuery para esto. Se puede hacer usando CSS solo, con el selector :hover .
Coloque un selector :hover en el elemento principal de los elementos div rojo y azul ( .demo en este caso, pero puede cambiar esto según sea necesario en su versión de producción) luego configure el div azul para display: block dentro de ese selector, como este:
body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .demo { position: relative; } .hover { font-size: 30px; font-weight: 900; color: blue; border: 2px solid #222; color: #fff; cursor: pointer; background-color: red; } .wrap { position: absolute; top: 80px; width: 120px; padding: 10px; background-color: blue; color: #fff; border: 2px solid #222; display: none; } .demo:hover .wrap { display: block; } <div class="demo"> <p class="hover">hover goin</p> <div class="wrap"> <h2>title</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo modi quasi </p> </div> </div>