问题描述： 在Angular项目中，当应用了CSS封装的网格组件时，发现:hover样式只会应用于当前网格组件，而不会应用于同级的其他网格组件。

解决方法：

1. 修改组件的HTML结构，使用父元素包裹所有网格组件，并在父元素上应用:hover样式。这样:hover样式将应用于所有子网格组件。

  
  
网格组件 1
  
网格组件 2
  
网格组件 3

/* :hover样式应用于父元素及其子元素 */
.grid-container:hover .grid-item {
  /* 添加:hover样式 */
  background-color: yellow;
}

2. 使用CSS伪类选择器：nth-child()，将:hover样式应用于指定位置的网格组件。

  
网格组件 1
  
网格组件 2
  
网格组件 3

/* :hover样式应用于第二个网格组件 */
.grid-container .grid-item:nth-child(2):hover {
  /* 添加:hover样式 */
  background-color: yellow;
}

这样，当鼠标悬停在第二个网格组件上时，:hover样式将被应用。

请根据实际情况选择适合的解决方法。