Displaying an HTML element when hovering over only with CSS

Question

I'm trying to make the text-info element display only when I hover over the container element using only CSS and no JS and it doesn't work, would love some advice.

I was assuming it had something to do with the display flex instead of display block so I attempted that too, but it didn't help.

Note that even without the hover, the text doesn't display on the page and I can't tell why.

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>

Kameron · Accepted Answer · 2022-01-05 18:37:01Z

You are using the wrong css selector for your hover style. You are using the + selector which is the sibling selector and .text-info is a child not a sibling of .container.

Also, you would need to set your opacity to 1 on hover so that you can see it.

Like this:

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

Kameron · Accepted Answer · 2022-01-05 18:33:24Z

As long as text-info opacity is set to 0 normally, you can use the following sibling selector ~ in your CSS to set the opacity to 1 on hover. See below.

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

See it in action

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>

Collectives™ on Stack Overflow

Displaying an HTML element when hovering over only with CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related