How to make a <div> appear when hovering over another <div>-CodePudding

I am trying to make a game, and I am currently working on the "home-site". I want to use a code that enables me to hover over the "Velg Level" area (translated from Norwegian, it means "choose level") in the middle, and that the "1, 2, 3"'s appear. Right now, they are just displayed under the "Velg level" area. To clarify, I want the levels to be hidden and not appear until someone hovers over the target area.

I have tried to use both CSS and Javascript to accomplish the result that I want (for a div to appear on hover), but I find it difficult. This is the code I have so far, HTML and CSS:

#overskrift {
  display: flex;
  justify-content: center;
  border: red 1px solid;
}

#velgLevel {
  padding-top: -150px;
  display: flex;
  justify-content: center;
  border: red 1px solid;
  cursor: grab;
}

.levelKnapper {
  display: flex;
  justify-content: space-evenly;
}

#img1 {
  cursor: grab;
}

#img2 {
  cursor: grab;
}

#img3 {
  cursor: grab;
}

<!-- Overskrift på forsiden-->
<div id="overskrift">
  <img src="Levelknapp.gif" alt="Levelknapp" style=h eight:400px;>
</div>

<!-- Legger til velg level- knapp midt på siden-->
<div id="velgLevel">
  <img src="velgLevel.png" alt="velgLevel" style="width:300px;height:300px;">
</div>

<div >
  <div id="img1">
    <img src="1.png" alt="level 1" width="250">
  </div>
  <div id="img2">
    <img src="2.png" alt="level 2" width="250">
  </div>
  <div id="img3">
    <img src="3.png" alt="level 3" width="250">
  </div>
</div>

CodePudding user response：

To do what you require you can us the :hover state of #velgLevel to set the display state of the sibling .levelKnapper element, like this:

/* show .levelKnapper when hovering over velgLevel */
#velgLevel:hover   .levelKnapper {
  display: flex;
}

/* keep .levelKnapper visible when hovering over it */
.levelKnapper:hover {
  display: flex;
}

Here's a full working example:

#overskrift {
  display: flex;
  justify-content: center;
  border: red 1px solid;
}

#velgLevel {
  padding-top: -150px;
  display: flex;
  justify-content: center;
  border: red 1px solid;
  cursor: grab;
}

#velgLevel:hover   .levelKnapper {
  display: flex;
}

#velgLevel img {
  width: 300px;
  height: 50px;
}

.levelKnapper {
  display: none;
  justify-content: space-evenly;
}

.levelKnapper:hover {
  display: flex;
}

#img1,
#img2,
#img3 {
  cursor: grab;
}

<!-- Overskrift på forsiden-->
<div id="overskrift">
  <img src="Levelknapp.gif" alt="Levelknapp" />
</div>

<!-- Legger til velg level- knapp midt på siden-->
<div id="velgLevel">
  <img src="velgLevel.png" alt="velgLevel" />
</div>

<div >
  <div id="img1">
    <img src="1.png" alt="level 1" width="250">
  </div>
  <div id="img2">
    <img src="2.png" alt="level 2" width="250">
  </div>
  <div id="img3">
    <img src="3.png" alt="level 3" width="250">
  </div>
</div>

Note that I lowered the height of the img to make the demo more legible.