cssvisibilityoverlap

How can I make an element stop glitching if it gains visibility when another element behind it is hovered?

I have two divs; let's call them div 1 and div 2 and the one on top of the other is set to visibility:hidden:

picture

Basically the info div is supposed to appear whenever you hover the other one. That part works fine, except when I hover my mouse onto the text box, and it starts appearing and disappearing glitch-illy and it's extremely hard on the eyes.

What I want to achieve is that if div 1's area is hovered, even though it's behind another element, the visibility of div 2 will remain visible.

I suspect the issue is that mouse doesn't hover div 1 anymore, so div 2 disappears, then div 1 is hovered again, and repeat a thousand times in a second.

.ning-img, .bo-img {
  position:absolute;
    width:50%;
    height:100%;
    overflow:hidden;
    background-position: center center;
    background-size:cover;
    clip-path: polygon(32% 0, 100% 0, 68% 100%, 0% 100%);

}

.ning-img {
  left:0%;
  background-color:green;
}

.bo-img {
  left:50%;
  background-color:blue;
}
.ning, .bo {
  position:absolute;
  top:70%;
  left:10%;
  width:70%;
  height:10%;
  visibility:hidden;
  z-index:2;
}

.ning {
  background-color:purple;
}

.bo {
  background-color:yellow;
}

.bo-img:hover ~ .bo {
    animation-name:anim;
    animation-duration: 0.2s;
        animation-fill-mode: forwards;

}


.ning-img:hover ~ .ning {
    animation-name:anim;
    animation-duration: 0.2s;
        animation-fill-mode: forwards;

}

@keyframes anim {
    100% {
        visibility: visible;
    }
}
<!DOCTYPE html>
<html>
<!-- this is in the body -->
<div class="images">
  <div class="ning-img"></div>
  <div class="bo-img"></div>
  
  <div class="ning">hello</div>
  <div class="bo">hello2</div>


</div>

</html>

Solution

  • You could disable pointer events on the foreground element? doing this will maintain the hover state on the background element

    .ning-img, .bo-img {
  position:absolute;
    width:50%;
    height:100%;
    overflow:hidden;
    background-position: center center;
    background-size:cover;
    clip-path: polygon(32% 0, 100% 0, 68% 100%, 0% 100%);

}

.ning-img {
  left:0%;
  background-color:green;
}

.bo-img {
  left:50%;
  background-color:blue;
}
.ning, .bo {
  position:absolute;
  top:70%;
  left:10%;
  width:70%;
  height:10%;
  visibility:hidden;
  z-index:2;
}

.ning {
  background-color:purple;
  pointer-events:none;
}

.bo {
  background-color:yellow;
}

.bo-img:hover ~ .bo {
    animation-name:anim;
    animation-duration: 0.2s;
        animation-fill-mode: forwards;

}


.ning-img:hover ~ .ning {
    animation-name:anim;
    animation-duration: 0.2s;
        animation-fill-mode: forwards;

}

@keyframes anim {
    100% {
        visibility: visible;
    }
}
    <!DOCTYPE html>
<html>
<!-- this is in the body -->
<div class="images">
  <div class="ning-img"></div>
  <div class="bo-img"></div>
  
  <div class="ning">hello</div>
  <div class="bo">hello2</div>


</div>

</html>