仅使用 CSS 悬停时显示 HTML 元素

Question

我试图让 text-info 元素仅在我悬停在容器元素上时仅使用 CSS 而没有使用 JS 并且它不起作用，希望得到一些建议。

我假设它与显示 flex 而不是显示块有关，所以我也尝试过，但没有帮助。

请注意，即使没有悬停，文本也不会显示在页面上，我也不知道为什么。

body {
  color: #2f80ed;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
}

p {
  margin: 0;
}

.container {
  width: 520px;
  margin: auto;
}

.container img {
  width: 100%;
}

.text {
  width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

.text-code {
  text-align: center;
  font-size: 120px;
  font-weight: 400;
}

.container:hover+.text-info {
  display: flex;
}

.text-info {
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
}

footer p {
  margin: auto;
  font-size: 16px;
}

footer a {
  color: #2f80ed;
}

<div class="container">
  <img src="empty-boxes.svg" alt="error" />
  <div class="text">
    <p class="text-code">404</p>
    <p class="text-info">
      404 is an error.
    </p>
  </div>
</div>
<footer>
  <p>Go back.</p>
  <a href="https://google.com"></a>
</footer>

Answer 1

只要 text-info opacity 通常设置为 0，您可以在 CSS 中使用以下兄弟选择器 ~ 将 [=15= 上的 opacity 设置为 1 ].见下文。

.text-code:hover ~ .text-info {
  opacity: 1;
}

实际观看

body {
  color: #2f80ed;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
}

p {
  margin: 0;
}

.container {
  width: 520px;
  margin: auto;
}

.container img {
  width: 100%;
}

.text {
  width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

.text-code {
  text-align: center;
  font-size: 120px;
  font-weight: 400;
}

.text-info {
  color: black;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
}

footer p {
  margin: auto;
  font-size: 16px;
}

footer a {
  color: #2f80ed;
}

.text-code:hover ~ .text-info {
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>404 Page</title>
  <link href="css/styles.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <img src="empty-boxes.svg" alt="error" />
    <div class="text">
      <p class="text-code">404</p>
      <p class="text-info">
        404 is an error.
      </p>
    </div>
  </div>
  <footer>
    <p>Go back.</p>
    <a href="https://google.com"></a>
  </footer>
</body>

</html>

Answer 2

您为悬停样式使用了错误的 css 选择器。您正在使用 + 选择器，它是同级选择器，而 .text-info 是子级而不是 .container 的同级。

此外，您需要将鼠标悬停时的不透明度设置为 1，这样您才能看到它。

像这样：

.container:hover .text-info {
   display: flex;
   opacity: 1;
}

body {
  color: #2f80ed;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
}

p {
  margin: 0;
}

.container {
  width: 520px;
  margin: auto;
}

.container img {
  width: 100%;
}

.text {
  width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

.text-code {
  text-align: center;
  font-size: 120px;
  font-weight: 400;
}

.container:hover .text-info {
  display: flex;
  opacity: 1;
}

.text-info {
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
}

footer p {
  margin: auto;
  font-size: 16px;
}

footer a {
  color: #2f80ed;
}

<div class="container">
  <img src="empty-boxes.svg" alt="error" />
  <div class="text">
    <p class="text-code">404</p>
    <p class="text-info">
      404 is an error.
    </p>
  </div>
</div>
<footer>
  <p>Go back.</p>
  <a href="https://google.com"></a>
</footer>

仅使用 CSS 悬停时显示 HTML 元素

Displaying an HTML element when hovering over only with CSS

css

hover