无法通过叠加点击并悬停在按钮上

Question

覆盖层用于向上移动文本并显示按钮，但我无法将鼠标悬停或单击这些按钮，因为一旦我越过它们，覆盖层和文本就会下降，使其无法访问。

我尝试为鼠标进入和离开附加事件侦听器并为其维护状态，应用 CSS，使用指针事件。 我希望当我将鼠标悬停在显示按钮的覆盖层上，然后将鼠标悬停或单击按钮执行某些操作时，顶部元素会移至上方。问题是，即使我悬停在也有 :hover 的按钮上，它也应该保持悬停状态，并且覆盖层 :hover 只应在我位于整个覆盖层之外时禁用。

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>

Answer 1

我找到了通过修改一些 HTML 和 CSS 来实现此目的的替代方法。虽然CSS有点不完整，但是gaol已经实现了。

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;
  text-align: center;
}

.element1{
  color: white;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 1s;
}

.buttonsContainer{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  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 class="buttonsContainer">
      <button class="btn">b</button>
      <button class="btn">b</button>
      <button class="btn">b</button>
    </div>
  </div>
  <div class="element1">
    Some texts
  </div>
</div>

您可以根据您的要求编辑

. buttonsContainer

CSS。 方法是将

.buttonsContainer

移动到覆盖 div 内部，以便启用单击操作，并且仍然继续执行覆盖效果。