Odtnhj

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;
 

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

css :

li: hover
 write down style which you want to apply

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;
 

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

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.