如何在鼠標懸停時向菜單項添加和刪除類

Question

當鼠標懸停在菜單項上時，我想向菜單項添加和刪除“懸停打開”類。 我嘗試的代碼是將鼠標懸停在單個菜單項上時將該類添加到所有菜單項。

菜單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>

菜單bar.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;
  }
}

Answer 1

使用CSS ：hover偽類，它將起作用。

css：

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

Answer 2

您可以使用*ngFor

<ul>
  <li *ngFor="let menu of menuItems" (mouseover)="changeStyle(menu)" (mouseout)="changeStyle(menu)" [className]="menu.hovered ? 'hover-open nav-item':'nav-item'"><a href="#">{{menu.name}}</a></li>
</ul>

菜單bar.component.ts

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

@Component({
  selector: 'app-menu-bar',
  templateUrl: './menu-bar.component.html'
})
export class MenuBarComponent implements OnInit {
 menuItems: any = [];
 constructor() { 
  this.menuItems = [{name: 'link1', name: 'link2'}]
 }
  ngOnInit() {
  }

  changeStyle(menu) {
    menu.hovered = !menu.hovered;
 }
}

Answer 3

由於您有多個使用同一功能的元素，因此需要一些標識來標識需要添加類的導航項。

注意此更改：

(mouseover)="changeStyle('link1','in')" [class.hover-open]="hovered === 'link1'"  (mouseout)="changeStyle('link1','out')" class="nav-item"

我改變了什么？

(mouseover)="changeStyle('link1','in')" //passing unique id for each li
(mouseout)="changeStyle('link1','out')" // passing out to remove the class
[class.hover-open]="hovered === 'link1'" //checking if link is link1
 then add the class other wise remove

你可以做這樣的事情

<ul>
<li id="link1" (mouseover)="changeStyle('link1','in')" [class.hover-open]="hovered === 
'link1'"  (mouseout)="changeStyle('link1','out')" 
class="nav-item"><a href="#">Link 1</a>
</li>
<li id="link1" (mouseover)="changeStyle('link2','in')" 
[class.hover-open]="hovered === 'link2'" (mouseout)="changeStyle('link2','out')"  
class="nav-item">
<a href="#">Link 2</a></li>
<li id="link1" (mouseover)="changeStyle('link3','in')" [class.hover-open]="hovered === 'link3'" (mouseout)="changeStyle('link3','out')"  class="nav-item"><a href="#">Link 3</a></li>
<li id="link1" (mouseover)="changeStyle('link4','in')" 
[class.hover-open]="hovered === 'link4'" (mouseout)="changeStyle('link4','out')" 
 class="nav-item"><a href="#">Link 4</a></li>
</ul>



export class AppComponent {     
  hovered = '';

  changeStyle(linkName, typeOfMove) {
    if (typeOfMove === 'out') {
      this.hovered = '';
    } else {
      this.hovered = linkName;
    }
  }
}

這是它的演示： https : //stackblitz.com/edit/angular-jvk15a

Answer 4

我認為如果僅用於更改樣式，則可以在CSS上完成此代碼。

li { // default style for unhovered }
li:hover { // style when hover }

如果要通過DOM訪問它。 也許你可以試試這個

changeStyle(event) {
  const klass = event.classList

  if (klass.contains("hover-open"))
    // remove class here
  else // add the class here
}

如果希望，這將有所幫助。