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

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

一个名为rfpDoc的对象

特色：布尔（我正在用更大的文本设置特色项目的样式）

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

请注意，悬停时最大的网格项会展开网格，并推动缩放同级组件的方式。其他单个网格项组件在悬停在其上方时的行为不同

更换

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

与

---

如果你创建一个stackblitz，它将更容易帮助你。更新。谢谢你的指点！回答得好。但我真的会明白为什么会发生这种事？我也会的。我还没有找到解释。顺便说一下，应该将

光标：指针

应用于元素本身，而不是

：hover

伪类。

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