How to make a div overlap another while hovered-CodePudding

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 >
  <div ></div>
  <div ></div>
</div>

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

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
</div>