Angular + SCSS：如何在父级上的组件上应用样式：悬停

Question

我正在尝试将我的组件悬停在其父上。

当元素悬停时，action-list组件将显示一系列可能的操作。目的是要采取一种上下文相关的动作。

我正在使用host-context来检测何时将父级悬停，但是问题是将遍历父级树。 如果我具有以下条件：:host-context(:hover) {...} action-list将在其任何祖先（直到身体）悬停时显示。在这种情况下，它将始终显示Demo

我设法通过在父级和scss :host-context(。parent：hover）{...}`Demo

中设置一个CSS类来使其工作

它运行良好，但我想避免在父级上设置额外的类。

问题：

我知道在纯CSS中是不可能的，但是有没有angular / scss魔术语法可以选择直接父级？

类似:host-context(parent():hover) {...}

Answer 1

这是两种解决方案：

• 在父组件中：

.parent-component:hover ::ng-deep app-child-component .div-in-child {}

• 在儿童部分

:host-context(app-parent-component:hover) .child-component-div {}

:: ng-deep 允许您通过子组件树将样式向下强制到所有子组件视图中。