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

【问题标题】：Displaying an HTML element when hovering over only with CSS仅使用 CSS 悬停时显示 HTML 元素
【发布时间】：2022-01-06 02:37:01
【问题描述】：

我试图让 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>

【问题讨论】：

标签： css hover

【解决方案1】：

您为悬停样式使用了错误的 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>

【讨论】：

【解决方案2】：

只要text-info 不透明度通常设置为 0，您就可以在 CSS 中使用以下同级选择器 ~ 将 hover 上的不透明度设置为 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>

【讨论】：