如何将鼠标悬停在来自不同div的ID上？

Question

当我将鼠标悬停在id =“ hover”上时，我想显示一些数据，但是它不能在div id内正常工作，但是如果我将id放在不同的div中，它将无法工作

#stuff {
  opacity: 0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#hover {
  background-color: rgb(178, 181, 196);
}
#hover:hover + #stuff {
  opacity: 1;
}

<div class="d-flex flex-row">
  <div class="d-flex flex-column" style="width: 20%">
    <div class="p-2" id="hover">
      <a class="pointer-cursor" href="#">
        Hover me
      </a>
    </div>
  </div>
  <div class="d-flex flex-column" >
   <div class="p-2" id="stuff">Im here</div>
  </div>
</div>