Its asking a lot, but even my coding teacher cant figure out why the :hover tag won't work

Question

I am completely stuck when it comes to making this :hover tag work for these images. Along with that, I'm sure I have a million other mistakes within the code. The bottom portion was mainly done by my coding teacher. (The code below is after a good amount of tinkering and is far from neat and/or perfect)

body {
  background-image: url(sprigs-and-berries-of-mountain-ash-on-a-green-background-a-pattern-of-nature-with-black-rowan-berries-on-the-background-seamless-background-free-vector.jpg);
  overflow-x: hidden;
}

header {
  text-align: center;
}

.logo {
  text-align: center;
}

.large-image {
  width: 50%;
  border: 5px solid;
  display: none;
}

.small-image {
  width: 44%;
  border: 1px solid;
}

.small-image:hover .large-image {
  display: inherit;
}

<header>
  <img class="logo" src="5c2e2e57a97bc40295eb8385.png" alt="MSM-LOGO">
  <h1 class="logo">Plant Island</h1>
</header>
<a>
  <img id="1" class="small-image" src="Mammott.png" alt="Mammott">
  <img class="large-image" src="Mammott.png" alt="Mammott">
</a>
<img class="large-image" src="Noggin.png" alt="Noggin">
<img class="small-image" src="Noggin.png" alt="Noggin">

I tried to get my large-image to appear when the small-image was hovered upon. I expected something to be wrong, but this has been an enormous road block for the past few weeks

The `.large-image,` isn't a descendant of the `.small-image`. — David Thomas, Nov 29 '22 at 16:53

score 0 · Answer 1 · answered Nov 29 '22 at 17:08

Because the image with the large-image class is adjacent to the one with the small-image class then you need the Adjacent sibling combinator instead of the Descendant Combinator. I've also swapped the last two images around so .small-image appears before .large-image to make the last one work

body {
  background-image: url(sprigs-and-berries-of-mountain-ash-on-a-green-background-a-pattern-of-nature-with-black-rowan-berries-on-the-background-seamless-background-free-vector.jpg);
  overflow-x: hidden;
}

header {
  text-align: center;
}

.logo {
  text-align: center;
}

.large-image {
  width: 50%;
  border: 5px solid;
  display: none;
}

.small-image {
  width: 44%;
  border: 1px solid;
}

/* added the + below */
.small-image:hover + .large-image {
  display: inherit;
}

<header>
  <img class="logo" src="5c2e2e57a97bc40295eb8385.png" alt="MSM-LOGO">
  <h1 class="logo">Plant Island</h1>
</header>
<a>
  <img id="1" class="small-image" src="https://picsum.photos/id/237/200/300" alt="Mammott">
  <img class="large-image" src="https://picsum.photos/id/238/200/300" alt="Mammott">
</a>

<!-- swapped these around -->
<img class="small-image" src="https://picsum.photos/id/240/200/300" alt="Noggin">
<img class="large-image" src="https://picsum.photos/id/239/200/300" alt="Noggin">

Its asking a lot, but even my coding teacher cant figure out why the :hover tag won't work

1 Answers1