Display pop up on button/svg hover

HTML-CSS
1

I want to display pop up box when button or svg is hovered. I managed to do it when button is clicked using target pseudo class but it didn’t work with the hover selector.
This is the link to codepen: https://codepen.io/javas_ninja/pen/jOroZvZ

2

If you want to make this work with pure CSS, the item needs to be a sibling of the element that’s hovered:

<div class="icon-box">
  <a href="#items" class="btn">click me</a>
</div>
<div id="items">...</div>

.icon-box::hover + #items {
  visibility: visible;
}
1 Like
3

this didn’t work.
.icon-box::hover + #items {
visibility: visible;
}

4

Hey @saed1.
there is no } in last class ending.

5

Weird, apparently it only works with one colon:

.icon-box:hover + #items {
  visibility: visible;
}
6

thanks it worked for me.