Angular + SCSS : how to apply style on component on parent :hover

Question

我试图在鼠标悬停时显示我的组件。

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

我正在使用 host-context 来检测父级何时悬停，但问题是它会遍历父级树。如果我有以下内容::host-context(:hover) {...} action-list 将尽快显示其任何祖先(直到 body )悬停。在这种情况下，它将始终显示 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 让您可以通过子组件树强制样式向下进入所有子组件 View 。