Angular：CSS 封装错误- 网格组件：悬停样式应用于同级网格组件

Question

我在发现我的代码中的错误时遇到问题，希望得到任何帮助。我有一个网格容器组件，其中包含由 *ngFor 生成的子网格项组件。子组件接受两个输入：

1. 名为 rfpDoc 的对象
2. 特色：布尔值（我正在为特色项目设计更大的文字）。

css 悬停动画适用于所有子组件（将溢出设置为隐藏的缩放图像），第一个子组件除外（也恰好是特色项目）。当我将鼠标悬停在该组件上时，每个子组件都会缩放并溢出网格容器。知道为什么会这样吗？

Click for Stack Blitz URL 请注意，悬停时最大的网格项目会扩展网格并推动一些缩放同级组件的方式。其他单独的网格项目组件在悬停时没有相同的行为。

Click for Stack Blitz Editor

Answer 1

替换

        &:hover{
           width: 105%;
           height: 105%;
           cursor: pointer;
        }

和

        &:hover{
           transform: scale(1.05);
           cursor: pointer;
        }