Angular - Styling Child Component on Parent Component Hover

Issue

How do you style a child component when you hover on a parent component, across component boundaries - in Angular 17?

Doing this, in the parent CSS doesn't work on the child:

parent:hover .child {
  padding: 0px
}

Do I need to use :host ng::deep, even though that is being deprecated? Is there a better way, perhaps, of passing styles from parent to child, when the parent component is being hovered on?

Might there be a way of passing an Input to the child, when hovering on the parent?

Thanks in advance,

ST

Update - Solution:

This seems to be the best solution so far, for creating local template variables - though all the LLMs I've used don't recommend using *ngIf in this way (to create local template variables) - but whatever they say, the solution does work!

<div *ngIf="{ active: false } as $" (mouseenter)="$.active = true" (mouseleave)="$.active = false"><app-child [active]="$.active" /></div>

Solution

You have several options:

1. Add encapsulation: ViewEncapsulation.None in parent component (docs).

2. Use :host-context(.parent:hover) .child selector in child component (docs).

3. Use .parent:hover ::ng-deep .child selector in parent component. Yes, it's deprecated feature, but it's still widely used.

4. Use additional variable. May be useful for complex scenarios.

   <div (mouseenter)="active = true" (mouseleave)="active = false">
     <app-child [active]="active" />
   </div>
   

Answered By - Tortila