How can I add a class to an element on hover?

Question

How to add class to a div when hovered on the div.

Template -

<div class="red">On hover add class ".yellow"</div> 

Component -

import {Component} from 'angular2/core';  @Component({   selector: 'hello-world',   templateUrl: 'src/hello_world.html',   styles: [`     .red {       background: red;     }      .yellow {       background: yellow;     }    `] }) export class HelloWorld { } 

Demo

[ NOTE - I specifically want to add a new class and not modify the existing classes ]

Sigh! It is such a normal use case and I do not see any straight forward solution yet!

Answer 1

Not to dirty the code I just coded simple hover-class directive.

<span hover-class="btn-primary" class="btn" >Test Me</span> 

Running Sample

Code Editor stackblitz

Here below the directive,

import { Directive, HostListener, ElementRef, Input } from '@angular/core';  @Directive({   selector: '[hover-class]' }) export class HoverClassDirective {    constructor(public elementRef:ElementRef) { }   @Input('hover-class') hoverClass:any;      @HostListener('mouseenter') onMouseEnter() {     this.elementRef.nativeElement.classList.add(this.hoverClass);  }    @HostListener('mouseleave') onMouseLeave() {     this.elementRef.nativeElement.classList.remove(this.hoverClass);   }  } 

Answer 2

You can also just use something like:

[ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)" 

Then in the component

color:string = 'red';  changeStyle($event){   this.color = $event.type == 'mouseover' ? 'yellow' : 'red'; } 

Plunker

Alternatively, do everything in the markup:

[ngClass]="color" (mouseover)="color='yellow'" (mouseout)="color='red'"