不使用JavaScript能否实现鼠标悬停切换大图的图片画廊效果？

实现思路 #

该需求完全可以仅通过CSS实现，不需要任何JavaScript代码：

• 提前将所有大图和对应的说明文本写入大图展示容器，所有大图默认隐藏，叠放在相同位置
• 利用CSS:hover伪类配合兄弟/后代选择器，当悬停对应顺序的缩略图时，显示对应顺序的大图即可
• 鼠标移出缩略图区域后大图自动隐藏，无需额外关闭按钮

调整后的完整代码 #

HTML代码 #

<div style="text-align: center">
  <h2>悬停切换图片画廊</h2>
  <p>将鼠标移动到下方缩略图上即可查看大图：</p>
</div>

<!-- 缩略图区域 -->
<div class="row">
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" style="width: 100%" />
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width: 100%" />
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width: 100%" />
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" style="width: 100%" />
  </div>

  <!-- 大图展示容器 -->
  <div class="container">
    <!-- 第1张对应大图 -->
    <div class="gallery-item">
      <img src="img_nature.jpg" style="width: 100%" />
      <div class="imgtext">Nature</div>
    </div>
    <!-- 第2张对应大图 -->
    <div class="gallery-item">
      <img src="img_snow.jpg" style="width: 100%" />
      <div class="imgtext">Snow</div>
    </div>
    <!-- 第3张对应大图 -->
    <div class="gallery-item">
      <img src="img_mountains.jpg" style="width: 100%" />
      <div class="imgtext">Mountains</div>
    </div>
    <!-- 第4张对应大图 -->
    <div class="gallery-item">
      <img src="img_lights.jpg" style="width: 100%" />
      <div class="imgtext">Lights</div>
    </div>
  </div>
</div>

CSS代码 #

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial;
}
/* 缩略图列样式 */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}
.column img {
  opacity: 0.8;
  cursor: pointer;
}
.column img:hover {
  opacity: 1;
}
.row:after {
  content: '';
  display: table;
  clear: both;
}
/* 大图容器样式 */
.container {
  position: relative;
  display: none;
  margin-top: 10px;
}
/* 每个大图项默认隐藏，叠放位置相同 */
.gallery-item {
  display: none;
  position: relative;
}
/* 大图说明文字样式 */
.imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}
/* 悬停缩略图区域时显示大图容器 */
.row:hover .container {
  display: block;
}
/* 悬停第1个缩略图时显示第1个大图 */
.row .column:nth-child(1):hover ~ .container .gallery-item:nth-child(1) {
  display: block;
}
/* 悬停第2个缩略图时显示第2个大图 */
.row .column:nth-child(2):hover ~ .container .gallery-item:nth-child(2) {
  display: block;
}
/* 悬停第3个缩略图时显示第3个大图 */
.row .column:nth-child(3):hover ~ .container .gallery-item:nth-child(3) {
  display: block;
}
/* 悬停第4个缩略图时显示第4个大图 */
.row .column:nth-child(4):hover ~ .container .gallery-item:nth-child(4) {
  display: block;
}

效果说明 #

• 鼠标悬停任意缩略图时，会自动显示对应的大图和说明文本
• 鼠标移出缩略图区域后，大图自动隐藏，无需额外点击操作
• 兼容性覆盖所有现代浏览器

内容的提问来源于stack exchange，提问作者Noob Coder