将鼠标悬停在另一个div上时显示div

<div class="container">
  <div class="hoverable">鼠标悬停显示的内容</div>
  <div class="target">要悬停显示的div</div>
</div>

.container {
  position: relative;
}

.hoverable {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

.target:hover + .hoverable {
  display: block;
}

const target = document.querySelector('.target');
const hoverable = document.querySelector('.hoverable');

target.addEventListener('mouseenter', () => {
  hoverable.style.display = 'block';
});

target.addEventListener('mouseleave', () => {
  hoverable.style.display = 'none';
});