Hover not working even with correct syntax?

June 10, 2024

I’m working on my final project for school, and I’m trying to code a piece of text(d0 in this example) to appear when I hover over the door, which is a class for an image.

body {
  background-color: black;
  font-family: 'Times New Roman';
  color: white;
}

img {
  display: block;
  width: 200px;
}

.left {
  display: block;
  margin-right: auto;
  text-align: left;
}

.right {
  display: block;
  margin-left: auto;
  text-align: right;
}

.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.isopod {
  text-align: center;
  float: right;
}

.door:hover #d0 {
  visibility: visible;
}

#d0 {
  padding-top: 60px;
}

#d1 {}

#d2 {}

#d3 {}

.dialogue {
  text-align: right;
  display: block;
}

.overlay {
  float: right;
}

.hidden {
  visibility: hidden;
}

<img class="teddy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRrHoeqJN96hTGvwT9ljmnVBWqJx0ZVNwwPQ&s">
<img class="door center" src="https://codehs.com/uploads/15d20f866b54dbed5365a5ea6ffc91f8">
<span class="right">
                <div class="hidden" id="d1">Is anyone there?</div>
                <div class="overlay hidden" id="d0">…huh</div>
                <img class="right isopod" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Giant_Isopod_%2818443864634%29.jpg">
                <div class="overlay hidden" id="d2">shivers</div>
                <br> <br> <br>
                <span class="hidden" id="d3">How did it squish by itself…</span>
</span>

What am I doing wrong?

I tried changing the IDs to a class, before I was working with absolute positioning but apparently that doesn’t work, I tried rearranging it, but no matter what I did d0 did not ever show up when hovering over the door.

>Solution :

#d0 is not inside the .door element, so that selector is not actually matching any element. With the current HTML structure, you’d want to use the next sibling selector.

Update the selector to .door:hover + .right #d0.

This will look for a .door element being hovered, and then look for the next element being a .right, and then a #d0 within the .right to apply the style to.

body {
  background-color: black;
  font-family: 'Times New Roman';
  color: white;
}

img {
  display: block;
  width: 200px;
}

.left {
  display: block;
  margin-right: auto;
  text-align: left;
}

.right {
  display: block;
  margin-left: auto;
  text-align: right;
}

.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.isopod {
  text-align: center;
  float: right;
}

.door:hover + .right #d0 {
  visibility: visible;
}

#d0 {
  padding-top: 60px;
}

#d1 {}

#d2 {}

#d3 {}

.dialogue {
  text-align: right;
  display: block;
}

.overlay {
  float: right;
}

.hidden {
  visibility: hidden;
}

<img class="teddy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRrHoeqJN96hTGvwT9ljmnVBWqJx0ZVNwwPQ&s">
<img class="door center" src="https://codehs.com/uploads/15d20f866b54dbed5365a5ea6ffc91f8">
<span class="right">
                <div class="hidden" id="d1">Is anyone there?</div>
                <div class="overlay hidden" id="d0">…huh</div>
                <img class="right isopod" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Giant_Isopod_%2818443864634%29.jpg">
                <div class="overlay hidden" id="d2">shivers</div>
                <br> <br> <br>
                <span class="hidden" id="d3">How did it squish by itself…</span>
</span>