当其容器/父元素悬停时将css样式应用于元素

Question

当我将鼠标悬停在一个元素的容器上时，我希望该元素通过 css/scss 接收视觉变化。

要求： - 需要在子组件或 sass 文件中发生。无法了解父子关系。 - sass css 或角度组件内

我已经尝试过 Angular 的主机监听器装饰器，但这只是主机元素而不是它的父元素。

我尝试过 :host 和 :host-context 选择器，但与主机侦听器有类似的经验。

任何建议将不胜感激。

编辑：为了形象化，我可以在一个大正方形元素中放置一个小正方形元素，然后当小正方形元素与大正方形元素的区域不重叠的空间悬停时，小正方形接收一个样式。

澄清：

Answer 1

在小方块的HTML中，用div包裹起来：

<div class="small-square">
  // rest of HTML
</div>

在小方块的CSS中：

.small-square:hover {
  // styles
}

你为什么不能这样做？对不起，如果我不完全理解这个问题。

更新：

您可以在全局样式表 (AKA styles.css) 中执行此操作：

.large-square:hover .small-square {
  // styles for small square when large square is hovered
}

更新 2：

不确定主机上下文是否支持使用 :hover，如下所示：

:host-context(.large-square:hover) .small-square {
  // styles for small square when large square is hovered
}

:host-context(*:hover) .small-square {
  // styles for small square when large square is hovered
}

如果没有，那么我认为您别无选择，只能使用全局样式表。