鼠标悬停显示弹框效果实现代码示例 - HTML & CSS - 常规

您可以使用以下 HTML 和 CSS 代码实现鼠标放上去出现弹框的效果：

HTML 代码：

<div class='container'>
  <button class='btn'>点击我</button>
  <div class='tooltip'>这是一个弹框</div>
</div>

CSS 代码：

.container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.btn:hover + .tooltip {
  visibility: visible;
}

解释：

在 HTML 中，我们创建了一个包含按钮和弹框的容器。
在 CSS 中，我们将容器设置为相对定位，并将弹框设置为绝对定位。我们还将弹框的可见性设置为隐藏，并在按钮的悬停状态下将其设置为可见。
我们使用伪元素 ::after 创建了一个三角形，使弹框看起来更像一个气泡。
最后，我们使用相邻兄弟选择器 (+) 将弹框与按钮相关联，以便在按钮悬停时显示它。

这样，当鼠标放在按钮上时，弹框就会出现。