如果某个元素在其后面的另一个元素悬停时获得可见性，如何才能使其停止出现故障？

Question

我有两个div；我们将它们称为 div 1 和 div 2，其中一个位于另一个上方，设置为

visibility:hidden

:

基本上，只要您将鼠标悬停在另一个 div 上，信息 div 就会出现。这部分工作正常，除了当我将鼠标悬停在文本框上时，它开始出现和消失，而且对眼睛来说非常困难。

我想要实现的是，如果 div 1 的区域悬停，即使它位于另一个元素后面，div 2 的可见性将保持可见。

我怀疑问题是鼠标不再悬停在 div 1 上，因此 div 2 消失，然后再次悬停在 div 1 上，一秒钟重复一千次。

.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>

Answer 1

您可以禁用前景元素上的指针事件吗？这样做将保持背景元素上的悬停状态

.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>

如果某个元素在其后面的另一个元素悬停时获得可见性，如何才能使其停止出现故障？

问题描述投票：0回答：1

1个回答

最新问题

如果某个元素在其后面的另一个元素悬停时获得可见性，如何才能使其停止出现故障？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1