css - 如何在Angular的mouseOver上使用presenter-menu_avatar类定位和更改div的CSS边框属性？

Question

如何在 Angular 应用程序的 mouseOver 上使用 presenter-menu_avatar 类定位和更改 HTML 中 div 的 CSS 边框属性？我已经尝试过 [ngClass]，但是，我似乎没有正确实施它，因为它会使整个应用程序不断崩溃。

组件.ts：

export class Component {
  private isPopupDisplayed: boolean = false;

  onClick() {
    console.log('Clicked');
    this.isPopupDisplayed = true;
  }

  onClickedOutside(event) {
    this.isPopupDisplayed = false;
  }

} 

CSS：

.presenter-menu {
  background: $accent-color;
  &_avatar {
    &:after {
      border: 0.25rem solid $accent-color;
    }

  }

}

HTML：

<div *ngIf="isPopupDisplayed" >
        <ul class="popup" (clickOutside)="onClickedOutside($event)">
            <li><a>My Details</a></li>
            <li><a>Sign out</a></li>
        </ul> 
    </div>

    <div class="presenter-menu_avatar" (click)="onClick()" >
        <img [src]="avatarUrl">
    </div>

标签： cssangularproperties