CSS JS - overlay onmouseout child items issue-CodePudding

I'm struggling with an overlay with JS CSS. I have 4 boxes and 1 overlay. If I hover with my mouse over one box the overlay is sliding in, and cover all 4 boxes. If I move my mouse out of the overlay, it disappears. This all works well but... If I add any element to my overlay (text etc), then onmouseout is detecting all element, as I left the overlay, and the overlay disappear. I tried to change many things in CSS but couldn't find out the solution. Also, i read many questions similar to this, but couldn't find the proper one.

Here is my code:

function on() {
  document.getElementById("overlay").style.display = "block";
  document.getElementById('overlay').classList.add('mst-popupbox-full-slidein');
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

.box {
  background: red;
}

.overlay1 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  display: none;
  z-index: 5;
  cursor: pointer;
  color: white;

}

.inner {
  position: relative;
}

.mst-popupbox-full-slidein {
  animation: slide-in-sm;
  animation-duration: .5s;
}

@keyframes slide-in-sm {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

.mst-popupbox-orig {
  position: relative;
  display: block;
  opacity: 1;
  overflow: hidden;
  font-family: 'Libre-Baskerville-Bold' !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div >
  <div >
    <div >
      <div >
        <div id="overlay"  onm ouseout="off()">
          <h1>Hello</h1>
          <h1>Hello</h1>
          <h1>Hello</h1>
        </div>
        <div >
          <div  onm ouseover="on()">
            <div >
              <h1>1</h1>
            </div>
          </div>
          <div >2</div>
        </div>
        <div >
          <div >3</div>
          <div >4</div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

If anyone could help me out with this, would be glad. Best Regards:

CodePudding user response：

In this case,to achieve pupose you can use onmouseleave instead of onmouseout:

 <div id="overlay"  onm ouseleave="off()">
     <h1>Hello</h1>
     <h1>Hello</h1>
     <h1>Hello</h1>
  </div>

And onmouseenter instead of onmouseover:

<div >
    <div  onm ouseenter="on()">
        <div >
            <h1>1</h1>
        </div>
    </div>
    <div >2</div>
</div>

Because of the onmouseout, onmouseover will trigger when the mouse pointer is moved out of an element, or out of one of its children.

Key to research: bubble (propagate up the document hierarchy)