求助：CSS :hover伪类无法触发large-image显示问题

AI 小北

2026-8-10

问题分析与修复方案

核心问题

CSS选择器逻辑错误
你写的.small-image:hover .large-image是后代选择器，它只会匹配.small-image内部嵌套的.large-image元素，但你的大图和小图是同级兄弟关系，并非嵌套结构，所以这个选择器完全无法匹配到目标元素。
HTML结构混乱
第二组的大图写在了小图前面，就算用兄弟选择器也无法触发显示；同时所有图片没有分组，导致悬停时可能误触发其他组的大图。

修复后的代码

修正HTML（给每组图加独立容器，保证小图在前）

<header>
  <img class="logo" src="5c2e2e57a97bc40295eb8385.png" alt="MSM-LOGO">
  <h1 class="logo">Plant Island</h1>
</header>
<!-- 第一组：小图与大图放在同一容器内 -->
<div class="image-group">
  <img class="small-image" src="Mammott.png" alt="Mammott">
  <img class="large-image" src="Mammott.png" alt="Mammott">
</div>
<!-- 第二组：保持小图在前、大图在后的顺序 -->
<div class="image-group">
  <img class="small-image" src="Noggin.png" alt="Noggin">
  <img class="large-image" src="Noggin.png" alt="Noggin">
</div>

修正CSS（改用相邻兄弟选择器，配合容器实现精准触发）

body {
  background-image: url(sprigs-and-berries-of-mountain-ash-on-a-green-background-a-pattern-of-nature-with-black-rowan-berries-on-the-background-seamless-background-free-vector.jpg);
  overflow-x: hidden;
}

header {
  text-align: center;
}

.logo {
  text-align: center;
}

.large-image {
  width: 50%;
  border: 5px solid;
  display: none;
}

.small-image {
  width: 44%;
  border: 1px solid;
}

/* 用相邻兄弟选择器+容器，确保只触发当前组的对应大图 */
.image-group .small-image:hover + .large-image {
  display: block; /* 用block比inherit更明确，避免继承父元素的未知display值 */
}