• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

129
Views
¿Sobre el uso de javascript para realizar el bloque abierto flotante?

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>

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error