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

Question

当我将鼠标悬停在元素的容器上时，我希望该元素通过css / scss进行视觉更改。

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

我已经尝试过用角度设置主机侦听器装饰器，但这只是主机元素，而不是其父元素。

我尝试过：host和：host-context选择器，但与托管侦听器具有相似的经验。

任何建议将不胜感激。

编辑：为了直观地看到这一点，我可以在一个大正方形元素内放置一个小正方形元素，然后当小正方形元素与大正方形元素的区域不重叠的空间被悬停时，小正方形就会收到样式。 / p>

澄清：

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
}

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