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

Question

I am trying to show my component when it's parent is hovered.

The action-list component will display a list of possible actions when an element is hovered. The goal is to have a kind of contextual actions.

I am using host-context to detect the when a parent is hovered, but the issue is that will go through the parent tree. If I'm have the following : :host-context(:hover) {...} the action-listwill be shown as soon any of its ancestor (until body)are hover. In that case it will always be displayed Demo

I managed to make it work by setting a css class on the parent and in scss :host-context(.parent:hover) {...}` Demo

It is working well, but I'd like to avoid having to set an extra class on the parent.

QUESTION:

I know it is not possible in pure CSS, but is there an angular/scss magic syntax that will allow to select the direct parent?

Something like :host-context(parent():hover) {...}

Answer 1

Here is two solutions :

• In the parent component :

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

• In the children component

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

::ng-deep let you to force a style down through the child component tree into all the child component views.