鼠标悬停.imgBox时.rollOver的transform未生效，原因及解决方法

首先，你的hover效果不生效的核心问题是CSS选择器写反了！

看你写的这段CSS：

.rollOver .imgBox:hover{ transform: translateX(-200px); }

这个选择器的意思是：选中.rollOver内部的.imgBox元素，当这个.imgBox被hover时应用transform。但你的DOM结构是.imgBox包裹着.rollOver，所以这个选择器根本找不到对应的元素，自然不会有任何效果。

当你鼠标悬停在.imgBox上时，.rollOver元素不会有任何变化，因为没有正确的CSS规则触发它的属性修改。

修正方案 #

把hover选择器改成正确的嵌套关系：当.imgBox被hover时，修改它内部的.rollOver的transform属性，代码如下：

body{ margin: 0; padding: 0; }
.imgBox{ width: 500px; height: 500px; position: relative; overflow: hidden; /* 避免元素超出容器显示 */ }
img{ width: 100%; height: 100%; object-fit: cover; /* 让图片保持比例适配容器，避免拉伸变形 */ }
.rollOver{ position: absolute; left: 0px; top: 0px; background-color: rgba(3, 3, 3, 0.897); height: 100%; width: 100%; transform: translateX(-300px); transition:all .4s ease; }
.imgBox:hover .rollOver{ transform: translateX(-200px); } /* 修正后的选择器 */

内容的提问来源于stack exchange，提问作者Eirik Vattøy