css鼠标悬停提示内容

CSS鼠标悬停提示内容可以通过CSS伪类选择器:hover来实现。具体代码如下：

HTML代码：

<div class="hover-text">鼠标悬停在我上面</div>

CSS代码：

.hover-text {
  position: relative;
}

.hover-text:hover:before {
  content: "这是提示内容";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
}

解释：

1. 首先，为了实现鼠标悬停提示内容，我们需要给要添加提示内容的元素设置position: relative;属性，以便在该元素内部绝对定位提示框。

2. 然后，我们使用:hover伪类选择器来选择鼠标悬停在该元素上时的状态。

3. 接着，我们使用:before伪元素来添加提示内容。content属性用于设置提示文本，position: absolute;属性用于绝对定位在该元素的下方，top: 100%;和left: 50%;属性用于将提示框居中在该元素下方，transform: translateX(-50%);属性用于水平居中，padding属性用于设置提示框内边距，background-color属性和color属性用于设置提示框背景色和文字颜色，border-radius属性用于设置提示框圆角，font-size属性用于设置提示文本大小，white-space属性用于设置文本空白处的处理方式。

4. 最后，我们就实现了鼠标悬停提示内容的效果。