Html - Hover not working even with correct syntax?

ChesNogat
June 10, 2024
144 views
0 votes
2 Answers

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.

Answers

The issue is that you are trying to select an element inside of an img (.door:hover #d0) but there is nothing like this since the img tag is a self-closing tag (or an empty tag) that cannot include elements inside it.

However, in css you can select siblings, therefore, you can select .right then target #d0, to do so, you need to convert that css to .door:hover + .right #d0, the plus sign means the next sibilng then select #d0.

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;
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>The Fool</title>
  </head>
  <body>
    <img class="teddy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRrHoeqJN96hTGvwT9ljmnVBWqJx0ZVNwwPQ&s" />

    <img class="door center" src="https://codehs.com/uploads/15d20f866b54dbed5365a5ea6ffc91f8" />

    <div 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>
    </div>
  </body>
</html>

P.S

While making a <span> as a container for divs may work, <span> element should not contain a <div> element according to HTML standards. The <span> is an inline element, whereas <div> is a block-level element. Mixing inline and block-level elements in this manner is not valid HTML and can lead to unexpected behavior in web browsers.

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Hover not working even with correct syntax?

Answers

P.S