使用兄弟选择器实现鼠标悬停时图片宽度100%失效问题排查

问题根源 #

你写的CSS选择器逻辑错误，导致无法选中目标img元素：

• 原选择器.section_img span:hover ~ .section_img img中，~是同级兄弟选择器，作用是选中当前元素之后的同级元素，但span的同级里并没有带.section_img类的元素，直接用~ img就能定位到同级的img。
• 另外，.section_img_icon用了绝对定位，父元素.section_img未设置position: relative的话，绝对定位会相对于整个页面，可能导致悬停区域不符合预期。

修正后的代码 #

HTML（无需修改）

<div class="section_img">
    <span class="section_img_icon" >STYLE</span>
    <img src="slide3.jpg" alt="" srcset="" />
</div>

CSS（修改选择器并补充父元素定位）

.section_img {
  position: relative; /* 新增：让子元素absolute相对于该容器定位 */
}
.section_img_icon {
  position: absolute;
  cursor: pointer;
}
.section_img img {
  width: 20%;
  height: 100vh;
  object-fit: cover;
  transition: width 0.3s; /* 可选：添加过渡动画提升体验 */
}

/* 修正后的选择器：选中span悬停时的同级img */
.section_img span:hover ~ img {
  width: 100%;
}

补充说明 #

• 移除了!important，因为修正后的选择器权重和.section_img img一致，且是:hover状态的触发规则，优先级足够覆盖默认样式。
• 可选添加transition属性，让宽度变化更平滑，提升交互体验。

内容的提问来源于stack exchange，提问作者Java Script