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

Question

我试图在其父组件悬停时显示我的组件。

当元素悬停时，该action-list组件将显示可能操作的列表。目标是有一种上下文操作。

我用来host-context检测父级何时悬停，但问题是它将遍历父级树。如果我有以下内容：只要它的任何祖先（直到主体）悬停，就会显示:host-context(:hover) {...}。action-list在这种情况下，它将始终显示Demo

:host-context(我设法通过在父级和 scss .parent:hover) {...}`演示中设置 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 让您可以将样式强制通过子组件树向下传递到所有子组件视图中。