Question

我在使用HTML和CSS时遇到麻烦。

我有两个直接位于另一个容器之上的容器。

我正在尝试做到这一点，以便当用户将最上面的容器悬停时，它会隐藏最上面的容器，以显示后面的容器。这些都是通过更改：hover的生存能力来完成的。

但是，我发现它可以正常工作，但通常只会导致两个状态之间快速闪烁。

我不知道为什么会这样，而且似乎无法弄清楚。我尝试更改z-index和其他类似职位建议的职位，却无济于事。

代码笔上的代码：https://codepen.io/michaelnicol/pen/jOqYbGo

HTML：

<html>
  <head>
  </head>
  <body>
    <main>
      <div class="image_container">
        <div class="text_div">
          <h1>Mona Lisa</h1>
          <p>Lorem lipsum dolor sit amat</p>
        </div>
      </div>
    </main>
  </body>
</html>

CSS：


/* Formatting Code */

main {
  width: 90%;
  height: 90%;
  min-height: 900px;
  border: 1px solid black;
  background-color: #efefef;
  margin: 5%;
  border-radius: 20px;
  box-shadow: 2px 2px 5px black;
  display: flex;
  justify-content: center;
  align-items: center;
}


body {
  display: flex;
  justify-content: center;
  background-color: rgb(147, 165, 207);
}

.text_div > h1, .text_div > p {
  color: white;
  text-shadow: 2px 2px 5px black;
}

/* image hover code */

.image_container {
  height: 300px;
  width: 400px;
  border: 1px solid black;
  background-color: rgb(156, 48, 48);
  background-image: url("https://i.pinimg.com/474x/c6/90/48/c69048072a6d77dfb0a317db98ef145d.jpg")
}

.text_div {
  visibility: visible;
  opacity: 0.85;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: 0.5s ease-in-out;
}

.text_div:hover {
  visibility: hidden;
}

Answer 1

尝试替换为：

.text_div:hover {
  visibility: hidden;
}

与此：

.image_container:hover .text_div {
    opacity: 0;
    pointer-events: none;
}

悬停更改可见性时闪烁

1 个答案: