CSS悬停交互问题：hover指定类时修改目标元素灰度值

你的问题出在CSS兄弟选择器的方向限制上：+和~选择器只能选中当前元素之后的兄弟元素，但你的结构里points_profilepic是points_picture_file的前一个兄弟，所以这两个选择器都无法生效。

下面给你两种可行的解决方案：

方案一：利用父元素Hover（无需修改HTML结构） #

因为你的points_picture_file是绝对定位覆盖在头像上的，当鼠标Hover在它上面时，其实也同时Hover在了父容器width_100上。我们可以直接监听父容器的Hover状态来控制头像的灰度：

修改CSS，添加以下规则：

.width_100:hover .points_profilepic {
  filter: grayscale(0);
}

这个方案最省心，不需要调整HTML结构，而且因为父容器的Hover范围刚好和文件输入框的覆盖范围一致，效果完全符合预期。

方案二：调整HTML元素顺序（使用兄弟选择器） #

如果一定要用兄弟选择器，可以把input元素移到img前面，这样就能用+选择器选中后面的头像：

修改后的HTML结构：

<div className="width_100"> 
  <input type="file" onChange={this.onImageChange.bind(this)} className="points_picture_file" accept="image/*"/>
  <img src={selfie} className="points_profilepic" title="Upload your profile picture"/>
</div>

然后使用+选择器的CSS规则：

.points_picture_file:hover + .points_profilepic {
  filter: grayscale(0);
}

因为你的文件输入框是绝对定位的，调整顺序后不会影响它的视觉位置，功能和样式都能正常工作。

两种方案都能解决你的问题，推荐第一种，代码改动最小且逻辑更简洁。

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