css鼠标悬停显示文字

/* CSS 样式 */
<style>
.box {
  position: relative;
  display: inline-block;
}

.box .tooltip {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* 将提示框放置在元素上方 */
  left: 50%;
  margin-left: -60px; /* 确保提示框水平居中 */
  opacity: 0;
  transition: opacity 0.3s;
}

.box:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
</style>

<!-- HTML 结构 -->
<div class="box">
  鼠标悬停我
  <span class="tooltip">这是提示文字</span>
</div>

解释说明：

1. HTML 结构:

   • div 元素带有 box 类，包含一段文本和一个 span 元素。span 元素用于显示提示文字。

2. CSS 样式:

   • .box: 设置为相对定位 (position: relative)，以便内部的绝对定位元素（如提示框）可以相对于它进行定位。
   • .tooltip:
     • visibility: hidden：默认隐藏提示框。
     • position: absolute：使提示框相对于 .box 定位。
     • bottom: 125%：将提示框放置在 .box 的上方。
     • opacity: 0 和 transition: opacity 0.3s：实现淡入淡出效果。
   • .box:hover .tooltip: 当鼠标悬停在 .box 上时，提示框变得可见并逐渐显示出来 (visibility: visible 和 opacity: 1)。

这样，当用户将鼠标悬停在 "鼠标悬停我" 文字上时，会显示提示文字 "这是提示文字"。