HTML/CSS实现图片悬停去灰度及上方绝对定位元素交互兼容

问题根因 #

你当前使用的是img:hover选择器触发灰度取消效果，但绝对定位的.text-box层级高于图片，鼠标悬停在文字或按钮上时，hover事件被上层的.text-box拦截，无法触发图片本身的hover状态。

解决方案 #

仅需要修改悬停触发的选择器，改为监听父容器.image-box的hover状态，再作用到内部的img元素即可。将原来的样式：

#homepage-solutions .image-box img:hover {
    -webkit-filter: grayscale(0);
    filter: none;
}

替换为：

#homepage-solutions .image-box:hover img {
    -webkit-filter: grayscale(0);
    filter: none;
}

这样只要鼠标进入.image-box的范围内，不管悬停在图片还是上层的文字、按钮上，都会触发图片恢复彩色的效果，原有其他交互逻辑完全不受影响。

不推荐给.text-box设置pointer-events: none的方案，该属性会导致文字区域内的按钮无法点击，无法满足基础交互需求。

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