Issue
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/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container bg-light">
<div class="row">
<div class="col-6">
<div class="row inner p-0 ">
<div id="overlay" class="overlay1 bg-dark p-0 " onmouseout="off()">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
<div class="col-6 inner p-0">
<div class="p-5 box" onmouseover="on()">
<div class="mst-popupbox-orig">
<h1>1</h1>
</div>
</div>
<div class="p-5">2</div>
</div>
<div class="col-6 p-0">
<div class="p-5 bg-danger">3</div>
<div class="p-5">4</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>If anyone could help me out with this, would be glad. Best Regards:
Solution
In this case,to achieve pupose you can use onmouseleave instead of onmouseout:
<div id="overlay" class="overlay1 bg-dark p-0 " onmouseleave="off()">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
And onmouseenter instead of onmouseover:
<div class="col-6 inner p-0">
<div class="p-5 box" onmouseenter="on()">
<div class="mst-popupbox-orig">
<h1>1</h1>
</div>
</div>
<div class="p-5">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)
Answered By - Hồng Phúc
