About using javascript to realize hover open block?

user_11241725 0
Viewed 29

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>

css jquery javascript
1 Answers

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>

user_5194130
Related