Style element of list on hover in Angular 2-CodePudding

I have a structure:

<div>
   <ul>
     <li *ngFor="let product of searchResult?.products">
        Test
       <div>Content</div>
     </li>
   </ul>
</div>

And I would like to add some style to div inside li on mouseover on li. How can I do that? Using ViewChild? I cannot do this by CSS only. I have to get the position of li and apply appropriate offset-top on div inside.

Something like that https://codepen.io/agop/pen/VwwMGR But in Angular

CodePudding user response：

No css? You could use a directive that modifies the css, see: https://angular.io/guide/attribute-directives

and hostListener to do something on mouseover and mouseout See: Using CSS hover property in Angular directive?

(Sorry I'm on mobile, might post code later if you're still stuck)!

CodePudding user response：

You don't need any script for this. Just use css:

scss
li:hover > .divClass {
...
}

html
<li *ngFor="let product of searchResult?.products">
    Test
   <div >Content</div>
 </li>

CodePudding user response：

If you need some action, easy way to do it in template:

<li *ngFor="let product of searchResult?.products">
    Test
   <div 
    (mouseover)="addStyle($event)"
    (mouseout)="removeStyle($event)"
   >Content</div>
 </li>

Or you can listen with ViewChildren and fromEvent functional inside your component.