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

0

127
Views
About using javascript to realize hover open block?

I have a requirement but I really don't know how to implement it. The requirements are as follows:

when the mouse moves to the red block, the blue div can be opened, but the block cannot be closed when the mouse operates within the blue div, but as long as the mouse leaves the blue block, the The blue div disappears,

I really don't know how to implement it, I hope I can get your help, thank you.

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

Assuming I've understood your goal, you don't need JS/jQuery for this. It can be done using CSS alone, with the :hover selector.

Put a :hover selector on the parent element of both the red and blue div elements (.demo in this case, but you can change this as required in your production version) then set the blue div to display: block within that selector, like this:

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