When I try to use the overlay to move the text upwards and reveal buttons, I encounter an issue where I am unable to hover or click on those buttons. As soon as I try to interact with the buttons, the overlay and text come down, blocking my access.
I have attempted to attach event listeners for mouse enter and leave, maintain a state for it, apply CSS, and use pointer-events. My expectation is that the top element should move above when I hover over the overlay, revealing the buttons. I should be able to hover or click on the buttons to trigger an action. The challenge is to ensure that the top element remains in the hovered state even when I am hovering over the buttons. The overlay should only disable the hover effect when I am outside the entire overlay.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.container {
height: 50%;
width: 50%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.overlay {
position: absolute;
top: 35%;
left: 35%;
background: blue;
opacity: 0.3;
height: 40%;
width: 30%;
z-index: 1;
}
.element1 {
color: white;
font-size: 3rem;
font-weight: bold;
transition: transform 1s;
}
buttonsContainer {
position: absolute;
top: 53%;
left: 45%;
width: 200px;
display: flex;
justify-content: space-around;
align-items: center;
opacity: 0;
transition: opacity 1s;
}
.overlay:hover~.element1 {
transform: translateY(-100px);
}
.overlay:hover~.buttonsContainer {
opacity: 1;
z-index: 3;
}
.btn:hover {
color: red;
cursor: pointer;
}<div class="container">
<div class="overlay"></div>
<div class="element1">Some texts</div>
<div class="buttonsContainer">
<button class="btn">b</button>
<button class="btn">b</button>
<button class="btn">b</button>
</div>
</div>