About using javascript to realize hover open block?-CodePudding

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 >
  <p >hover goin</p>

  <div >
    <h2>title</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo modi quasi </p>
  </div>
</div>

CodePudding user response：

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 >
  <p >hover goin</p>
  <div >
    <h2>title</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo modi quasi </p>
  </div>
</div>