CSS 使用纯CSS，在鼠标悬停在另一个元素上时显示div

在本文中，我们将介绍如何使用纯CSS来实现在鼠标悬停在一个元素上时显示另一个div的效果。这种效果可以为网页添加交互性，并提升用户体验。接下来，我们将详细介绍实现该效果的步骤，并附上示例代码供参考。

阅读更多：CSS 教程

步骤1：创建HTML结构

首先，我们需要创建一个基本的HTML结构。在这个例子中，我们将创建一个包含两个div的容器。一个div用作显示的元素，另一个div则是我们要在鼠标悬停时显示的目标元素。代码如下：

<div class="container">
  <div class="element">显示的元素</div>
  <div class="target">目标元素</div>
</div>

步骤2：设置基本样式

在开始编写CSS之前，我们需要为元素设置一些基本的样式。可以根据需要调整字体、大小、颜色、背景等样式。

.container {
  position: relative;
}

.element {
  background-color: #f1f1f1;
  color: #333;
  padding: 10px;
}

.target {
  background-color: #333;
  color: #fff;
  padding: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

在这里，我们将目标元素设置为绝对定位，使其与显示的元素重叠在一起。通过将其隐藏并设置透明度为0，我们可以确保在鼠标悬停之前它是隐藏的。

步骤3：鼠标悬停时显示目标元素

为了在鼠标悬停时显示目标元素，我们需要使用CSS中的:hover伪类选择器。当鼠标悬停在元素上时，我们将显示目标元素并改变其透明度为1。

.container:hover .target {
  opacity: 1;
  visibility: visible;
}

如上所示，仅通过这几行CSS代码，我们已经成功实现了在鼠标悬停时显示目标元素的效果。

示例演示

下面是一个完整的示例，演示了如何使用纯CSS来实现在鼠标悬停在一个元素上时显示另一个div的效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>纯CSS鼠标悬停显示div示例</title>
  <style>
    .container {
      position: relative;
    }

    .element {
      background-color: #f1f1f1;
      color: #333;
      padding: 10px;
    }

    .target {
      background-color: #333;
      color: #fff;
      padding: 10px;
      position: absolute;
      top: 100%;
      left: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out;
    }

    .container:hover .target {
      opacity: 1;
      visibility: visible;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element">显示的元素</div>
    <div class="target">目标元素</div>
  </div>
</body>
</html>