CSS制造：鼠标移上去显示大图

下面是关于如何实现“CSS制造：鼠标移上去显示大图”的完整攻略。

步骤一：准备图片素材

在实现“鼠标移上去显示大图”的效果前，需要先准备好需要展示的原始图片。我们需要准备两个不同大小的图片：一个缩略图和一个大图。缩略图是展示在页面上的小图，在用户将鼠标移上去后，会展示大图。

步骤二：创建 HTML 结构

我们需要使用 HTML 构建一个基础的结构，包含一张缩略图和一个空的用于展示大图的容器。

<div class="gallery">
  <a href="#">
    <img src="thumbnail.jpg" alt="缩略图">
  </a>
  <div class="gallery-preview"></div>
</div>

其中，.gallery 是用来包含缩略图和大图容器的一个 div，.gallery-preview 是用于展示大图的容器。

步骤三：添加样式

下面是展示大图的容器的初始样式：

.gallery-preview {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

其中，display: none; 是用来隐藏大图容器的，position: absolute; 是为了将它放到缩略图下方，top: 100%; 是将大图容器放到缩略图的下方，left: 50%; 和 transform: translateX(-50%); 是将它居中放置。

下面是当鼠标悬停在缩略图上时，展示大图的容器的样式：

.gallery:hover .gallery-preview {
  display: block;
}

其中，：hover 是伪类选择器，当鼠标悬停在 .gallery 这个元素上时，应用样式。.gallery:hover .gallery-preview 选择器用于选择 .gallery 元素下的 .gallery-preview 元素，当鼠标悬停在 .gallery 元素上时，.gallery-preview 显示出来。

示例一：悬停在图片上显示大图

以下是一个完整示例，展示当鼠标悬停在图片上时，展示大图的效果：

<div class="gallery">
  <a href="#">
    <img src="thumbnail.jpg" alt="缩略图">
  </a>
  <div class="gallery-preview">
    <img src="preview.jpg" alt="大图">
  </div>
</div>

.gallery-preview {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.gallery:hover .gallery-preview {
  display: block;
}

示例二：悬停在文本上显示大图

以下是一个完整示例，展示当鼠标悬停在文本上时，展示大图的效果：

<div class="gallery">
  <p>我是文本</p>
  <div class="gallery-preview">
    <img src="preview.jpg" alt="大图">
  </div>
</div>

.gallery-preview {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.gallery:hover .gallery-preview {
  display: block;
}

需要注意的是，当鼠标悬停在 p 元素上时，展示大图。如果需要添加多个元素，只需在 .gallery 中放置内容即可。