84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
I have a div that when it is hovered, the background color changes, I also need to select the color based on an element in the component.
<div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red' : 'blue' "> </div>
From the comment link above:
"Actually this is not an Angular problem: pseudo-elements are not part of the DOM tree and therefore do not expose any DOM API that can be used to interact with them."
So you can use CSS variables instead:
Style file:
.highlight:hover { background-color: var(--highlight-color); }
template:
<div class="highlight" *ngFor="let u of users;" [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} "> {{ u.name }} </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
From the comment link above:
"Actually this is not an Angular problem: pseudo-elements are not part of the DOM tree and therefore do not expose any DOM API that can be used to interact with them."
So you can use CSS variables instead:
Style file:
.highlight:hover { background-color: var(--highlight-color); }template:
<div class="highlight" *ngFor="let u of users;" [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} "> {{ u.name }} </div>