Css Can'；t将悬停应用于html网格项

我使用html网格，其中包含如下卡片：

.cards容器{
显示：网格；
网格模板列：30%30%；
网格模板行：最小最大值（150px，自动）自动；
}
.card-area-1{
网格面积：1/1/3/2；
}
.card-area-2{
网格面积：1/2/3/3；
}
.card-area-1，
.card-area-2{
背景：#fff；
盒影：0 2px 18px 0 rgba（0,82,145,0.12）；
边界半径：8px；
}
.卡-1{
网格柱：1；
网格行：1；
}
.卡-2{
网格柱：2；
网格行：1；
}
.card-btn-1{
网格柱：1；
网格行：2；
}
.card-btn-2{
网格柱：2；
网格行：2；
}

标题1
文本1
标题2
文本2
因为
.card-area-1
上有
.card
。这就是为什么悬停不会被触发。您可以将
z-index
用于
.card-area-1


.cards容器{
显示：网格；
网格模板列：30%30%；
网格模板行：最小最大值（150px，自动）自动；
}
.card-area-1{
网格面积：1/1/3/2；
}
.card-area-2{
网格面积：1/2/3/3；
}
.card-area-1，
.card-area-2{
背景：#fff；
盒影：0 2px 18px 0 rgba（0,82,145,0.12）；
边界半径：8px；
}
.卡-1{
网格柱：1；
网格行：1；
}
.卡-2{
网格柱：2；
网格行：1；
}
.card-btn-1{
网格柱：1；
网格行：2；
}
.card-btn-2{
网格柱：2；
网格行：2；
}
.card-area-1{
位置：相对位置；
z指数：2；
}
.card-area-1：悬停{
边框：1px纯蓝色；
}

标题1
文本1
标题2
文本2