javascript - 如何在鼠标悬停时向菜单项添加和删除类

Question

当鼠标悬停在菜单项上时，我想向菜单项添加和删除“悬停打开”类。我尝试的代码是将鼠标悬停在单个项目上时将类添加到所有菜单项。

menu-bar.component.html

<ul>
<li (mouseover)="changeStyle()" (mouseout)="changeStyle()" [className]="hovered ? 'hover-open nav-item':'nav-item'"><a href="#">Link 1</a></li>
<li (mouseover)="changeStyle()" (mouseout)="changeStyle()" [className]="hovered ? 'hover-open nav-item':'nav-item'"><a href="#">Link 2</a></li>
<li (mouseover)="changeStyle()" (mouseout)="changeStyle()" [className]="hovered ? 'hover-open nav-item':'nav-item'"><a href="#">Link 3</a></li>
<li (mouseover)="changeStyle()" (mouseout)="changeStyle()" [className]="hovered ? 'hover-open nav-item':'nav-item'"><a href="#">Link 4</a></li>
</ul>

菜单栏.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu-bar',
  templateUrl: './menu-bar.component.html'
})
export class MenuBarComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }

  hovered = false;
  changeStyle($event) {
    this.hovered = !this.hovered;
  }
}

标签： javascriptangulartypescript

Answer 1

使用 CSS :hover伪类，它会工作。

CSS：

li: hover{
          write down style which you want to apply
}