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

Question

I want to add and remove a 'hover-open' class to the menu item when mouseover on that item. The code I tried is adding the class to all the menu items when mouseovered on a single item.

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>

menu-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

use CSS :hover Pseudo-class, and it will work.

css :

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

Answer 2

You do this using *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>

menu-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

As you have multiple elements using the same function you need some identity to identify which nav-item you need to add class.

Note this change:

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

What I changed?

(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

You can do something like this

<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;
    }
  }
}

Here is the demo of it: https://stackblitz.com/edit/angular-jvk15a

Answer 4

I think this code be done on css if you just used only for changing style.

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

if you want access it by DOM. maybe you could try this one

changeStyle(event) {
  const klass = event.classList

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

If hope this would help.