How do I display text while hovering over a container?

Question

I'm trying to show text while hovering over a container.

I have this code which works to display some text when hovering over item2. All of this is inside of a container. The issue with this though is if you hover anywhere other than item1 or item3, like in between them, the text will disappear again or spam swap between display:none; and display:flex;

Code:

.item1 {
    font-size: 1.5em;
    font-family: 'Poppins', sans-serif;
  grid-column:1 / span 1;
}

.item2 {
  grid-column: 1 / span 1;
}

.item2:hover + .item3{
    display: flex;
}


.item3:hover{
    display: flex;
}

.item3 {
  display: none;
  font-family: 'Poppins', sans-serif;
  grid-column: 1 / span 2;
  align-items: center;
  font-size: 1.5em;
}

To fix this issue I tried:

.grid-containerTest:hover + .item3{
    display: flex;
}

Which does nothing. What can I do to hover over .grid-containerTest and show .item3, if possible show more than one hidden element when hovering over it.

score 0 · Accepted Answer · answered Jun 15 '19 at 00:26

You need to remove the + in your CSS for the container hover, + applies when the next sibling matches the class you are providing. You want it to apply to children of the container when hovering on it.

I believe the code below works as you would like.

.grid-containerTest:hover .item3 {
    display: flex;
}

Let me know if this wasn't what you were hoping for

Demo

.item1 {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  grid-column: 1 / span 1;
}

.item2 {
  grid-column: 1 / span 1;
}

.item3 {
  display: none;
  font-family: 'Poppins', sans-serif;
  grid-column: 1 / span 2;
  align-items: center;
  font-size: 1.5em;
}

.grid-containerTest:hover .item3 {
  display: flex;
}

<div class="grid-containerTest">
  <div class="item1">
    Item 1
  </div>
  <div class="item2">
    Item 2
  </div>
  <div class="item3">
    Item 3
  </div>
</div>

That's it! Thank you. I completely misunderstood how the "+" worked. — RobertW, Jun 15 '19 at 00:29

How do I display text while hovering over a container?

1 Answers1

Demo