前端 鼠标悬停显示内容

在前端开发中，可以通过CSS的:hover伪类来实现鼠标悬停时显示内容的效果。

首先，需要在HTML中定义一个元素，例如一个div，用来显示内容。然后，在CSS中设置该元素的display属性为none，使其默认隐藏起来。

接下来，在CSS中使用:hover伪类对需要触发显示内容的元素进行样式设置。例如，可以将鼠标悬停的元素的背景色修改为不同的颜色，同时将之前隐藏的显示内容元素的display属性设置为block，以显示出来。

下面是一个示例代码：

HTML：

<div class="hoverable">
  <span class="content">显示内容</span>
  鼠标悬停显示内容的元素
</div>

CSS：

.content {
  display: none;
}

.hoverable:hover {
  background-color: #f00;
}

.hoverable:hover .content {
  display: block;
}

在上述代码中，.hoverable是需要触发显示内容的元素的类名，.content是需要显示的内容的元素的类名。鼠标悬停在.hoverable元素上时，会将其背景色修改为红色，并显示出.content元素中的内容。

通过这种方式，可以实现鼠标悬停时显示内容的效果。可以根据实际需求进行样式的调整和内容的修改