How to make a div overlap another while hovered

Question

I wanted to make a div that contains some info about a product and when the user hovered the product that div that contains information pops up but the info div seems to be glitching somehow and isn't stable

Here's the code:

.product {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 200px;
  z-index: 1;
}
.info {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 300px;
  z-index: 2;
  opacity: 0.5;
  visibility: hidden;
}
.product:hover + .info {
  visibility: visible;
}

<div class="parent">
  <div class="product"></div>
  <div class="info"></div>
</div>

How can I have a stable version that doesn't glitch and appear and disappear every millisecond

Answer 1

It happens because your mouse is hovering .info instead of .product. You need to add .info:hover

.product {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 200px;
  z-index: 1;
}
.info {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 300px;
  z-index: 2;
  opacity: 0.5;
  visibility: hidden;
}
.product:hover + .info, .info:hover {
  visibility: visible;
}

<div class="parent">
  <div class="product"></div>
  <div class="info"></div>
</div>