Javascript 如何使div变大并改变它'；什么内容悬停？

我希望一个div变得更大（“覆盖”其他div的区域），并在悬停时更改它的内容

下面是一段代码片段，显示了我的页面当前的外观：

.page\u容器{
显示：网格；
网格模板区域：“左侧边栏第一个平铺第二个平铺右侧边栏”
“左侧边栏第三个平铺第四个平铺右侧边栏”；
网格模板柱：15%35%35%15%；
}
.page_u侧边栏{
文本对齐：居中；
背景色：黑色；
颜色：白色；
}
.page_uu侧边栏--左侧{
网格区域：左侧边栏；
}
.page_uu侧边栏--右侧{
网格区域：右侧边栏；
}
.第页\uuu平铺{
高度：100px；
线高：100px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.page\u tile--第一个{
网格区域：第一块瓷砖；
背景色：白色；
}
.page_uutile--第二个{
网格区域：第二块瓷砖；
背景色：黑色；
颜色：白色；
}
.page_uutile--第三个{
网格面积：第三块瓷砖；
背景色：黑色；
颜色：白色；
}
.第四页{
网格面积：第四块瓷砖；
背景色：白色；
}

边栏
组件
外围设备
边栏
笔记本电脑
配件

我建议使用JavaScript来实现这一点。您不可能使用网格，网格仅对布局有用。CSS中最接近父选择器的是

：pseudo元素中的焦点

要更改大小，可以在CSS中使用
scale
命令；更多。您还可以使用
z-index
命令，使div出现在其他div前面。

但是，我认为使用javascript制作这种动画要好得多。youtube上有很多教程介绍类似的javascript动画