Show element when hover absolute position overlay but keep all events

Issue

Sometimes I have a bunch of elements to which I would like to add some info box when I hover over them. I've tried to add absolute positioned overlay to capture hover events and it works but I lose all events for elements behind overlay. To solve this I've tried pointer-events: none; but now the tooltip is not being displayed on hover.

.parent {
  position: relative;
  width : fit-content; /* Edit0, parent could be smaller than hover-box */
}

.hover-box {
  width: 100vw;
  height: 100%;
  background: red;
  opacity: 0.2;
  position: absolute;
  top: 0;
  /* click will work, but not hover */
  /* pointer-events: none;  */
}

.info {
  display: none;
}

.hover-box:hover+.info {
  display: inline;
}

<div class="parent">
  <button>btn0</button>
  <button>btn1</button>
  <div class="hover-box"></div>
  <button class="info">info</button>
</div>

Edit0 : Added fit-content to show the problem better. Parent could be smaller.

Edit1 : Maybe there is some way to have events on hover-box and buttons at the same time?

Solution

I've set the z-index of the buttons to 2, which places them above the overlay and allows them to be clicked.

.parent {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.hover-box {
  width: 100vw;
  height: 100%;
  background: red;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
}

.info {
  display: none;
  position: relative;
}

.parent:hover .info {
  display: inline-block;
}

button {
  margin: 2px;
  z-index: 2;
}

<div class="parent">
  <div class="hover-box"></div>
  <button>btn0</button>
  <button>btn1</button>
  <button class="info">info</button>
</div>

Answered By - Jacob