CSS图片悬停显示覆盖层失效问题排查与解决

为啥你的代码没生效？ #

问题出在那个hover选择器上——你写的 img:hover #home-d .projects-wrapper .project .image:before 逻辑完全反了！

你想表达的是「当img被悬停时，显示它父容器的:before伪元素」，但CSS选择器的写法是从左到右匹配后代，这个选择器的意思是：找一个被悬停的img，然后在它内部找.image:before元素。可实际上img是.image的子元素，伪元素属于.image，这根本匹配不到任何东西啊！而且CSS现在还不支持父选择器，没法通过子元素的hover直接控制父元素的样式。

怎么改？ #

换个思路：把hover事件绑定到.image容器上。因为当你把鼠标放到图片上时，父容器.image也会触发hover状态，这样就能顺利控制它的:before伪元素了。

修正后的核心CSS代码：

/* 把原来的img:hover选择器替换成这个 */
#home-d .projects-wrapper .project .image:hover:before {
  opacity: 1;
  visibility: visible;
}

完整的修正后CSS代码如下：

#home-d .projects-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 4rem; text-align: center; }
#home-d .projects-wrapper .project .image { position: relative; }
#home-d .projects-wrapper .project .image:before { content: ''; visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 3; background: rgba(100, 81, 246, 0.9); border-radius: 10px; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; }
#home-d .projects-wrapper .project .image:hover:before { opacity: 1; visibility: visible; }
#home-d .projects-wrapper .project .image img { border-radius: 10px; -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15); width: 100%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#home-d .projects-wrapper .project .image img:hover { -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2); }
#home-d .projects-wrapper .project h3 { font-size: 1.2rem; font-weight: 400; padding: 1rem 0; }

额外小提示 #

• 现在.image的尺寸和图片完全一致（因为img是width:100%），所以不管你悬停在图片还是容器上，效果都一样，不会有多余的触发区域。
• 同时设置visibility和opacity是个好做法：opacity:0只是让元素透明，但它仍然能被点击；visibility:hidden会让元素彻底不可交互，避免误操作。

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