Html 子元素上的CSS网格悬停效果无效

我试图在css网格中的特定子元素上实现覆盖悬停效果，但它不起作用

我在一个单独的div上尝试了相同的代码，它工作得很好，当我使用chrome开发工具激活悬停效果时，它实际上是工作的，但是当我试图用鼠标悬停在上面时，它不是

我试图添加覆盖的元素是.item3、.item6、.item8类

希望有人能帮我

这是我的密码：

.item1{
网格区域：第一；
身高：391px；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/simple-reliable-innovatice-banner-2.jpg");
背景尺寸：封面；
}
.项目2{
网格面积：第二；
高度：92px；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/texture-1.jpg");
背景尺寸：封面；
}
.项目3{
网格面积：第三；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/Lifestyle-2.jpg");
背景尺寸：封面；
}
.item4{网格区域：第四；}
.5项目{网格区域：第五；}
.项目6{
网格面积：第六；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/Home-and-Living-2.jpg");
背景尺寸：封面；
}
.7{网格区域：第七；}
.项目8{
网格面积：8个；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/Cars-and-Boats-1-1.jpg");
背景尺寸：封面；
}
.item3、.item4{
高度：299px；
}
.item5、.item6、.item7、.item8{
身高：391px；
}
.网格容器{
字体系列：“roboto”、“sens serif”；
显示：网格；
网格模板区域：
“第一秒”
“第一秒”
“第一第三第四”
"五六七八",；
网格模板柱：25%25%19.7%30.3%；
背景色：#FFF；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：左对齐；
填充：20px 20px；
字体大小：30px；
}
.家庭类别名称
{
字号：28px；
字号：750；
}
.主分类内容
{
字号：18.5px；
右边填充：40px；
线高：1.6；
填充顶部：15px；
}
.项目3{
位置：相对位置；
}
.主类别覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.grid容器。第3项：悬停。主类别覆盖{
不透明度：.5；
}
.item3：悬停。主类别覆盖{
不透明度：.5；
}
.主类别内容覆盖{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：90%；
左：22%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

生活方式
生活方式
发掘与您的日常需求完美融合的最新技术。可能是DIY刮擦
修理或未来的创新。
家庭与生活
惊奇于MagicEzy的表面修复套件，这些套件用于制作DIY地板、瓷砖、外观，甚至
厨房和浴室维修看起来很专业
家庭与生活
汽车和船只
探索MagicEzy的顶级DIY刮伤去除剂、无滴漏漆屑修复套件、玻璃纤维和玻璃纤维
gelcoat船修理包准备好与您一起航行和旅行
汽车和船只

您需要向所有div项添加

position:relative

，如

.grid container>div{position:relative}

或仅在

中。item6

和

中。item8

否则

位置：绝对

div相互覆盖还为

.item6

和

.item8

添加悬停css

.item1{
网格区域：第一；
身高：391px；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/simple-reliable-innovatice-banner-2.jpg");
背景尺寸：封面；
}
.项目2{
网格面积：第二；
高度：92px；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/texture-1.jpg");
背景尺寸：封面；
}
.项目3{
网格面积：第三；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/Lifestyle-2.jpg");
背景尺寸：封面；
}
.item4{网格区域：第四；}
.5项目{网格区域：第五；}
.项目6{
网格面积：第六；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/Home-and-Living-2.jpg");
背景尺寸：封面；
}
.7{网格区域：第七；}
.项目8{
网格面积：8个；
背景图像：url（“https://magicezy.com/wp-content/uploads/2021/01/Cars-and-Boats-1-1.jpg");
背景尺寸：封面；
}
.item3、.item4{
高度：299px；
}
.item5、.item6、.item7、.item8{
身高：391px；
}
.网格容器{
字体系列：“roboto”、“sens serif”；
显示：网格；
网格模板区域：
“第一秒”
“第一秒”
“第一第三第四”
"五六七八",；
网格模板柱：25%25%19.7%30.3%；
背景色：#FFF；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：左对齐；
填充：20px 20px；
字体大小：30px；
位置：相对位置；
}
.家庭类别名称
{
字号：28px；
字号：750；
}
.主分类内容
{
字号：18.5px；
右边填充：40px；
线高：1.6；
填充顶部：15px；
}
.项目3{
位置：相对位置；
}
.主类别覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；