How to make a display:none block box belong to it's parent box when it change to display:block

Question

Today I found a problem and it's about how to keep my delomorphous child box in the parent box.

The keep means when I hover on the delomorphous box ,it won't disappear.

I found that I can't keep the child box when I used position:absoluted with pointer-events: none;.but I didn't know why. If I just use one of them, I can keep the child box. so if you know what happend or you can give some suggest when I use all of them and keep it I I would appreciate

let item = document.querySelector('.item')
let boxEl = document.querySelector('.box')
item.onmouseover = function(e) {
  boxEl.style.display = 'block'
}
item.onmouseout = function(e) {
  boxEl.style.display = 'none'
}

.item {
  position: relative;
}

.box {
  position: absolute;
  top: 18px;
  width: 100px;
  height: 100px;
  background-color: pink;
  display: none;
  pointer-events: none;
}

<div class="item">
  google
  <div class="box"></div>
</div>