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!

Use a directive. Read this article and you should be able to figure out the rest :) https://angular.io/docs/ts/latest/guide/attribute-directives.html — Fredrik Lundin, Mar 06 '17 at 18:45

score 91 · Answer 1 · edited Oct 11 '22 at 18:53

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

}

@AbdulmalekAlbakkar https://www.monkeyuser.com/2020/election — Julian Egner, Feb 26 '21 at 15:49

score 83 · Accepted Answer · edited Oct 11 '22 at 20:40

83

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'"

edited Oct 11 '22 at 20:40

upe

1,862
1
19
33

answered Mar 06 '17 at 18:48

Dylan

4,703
1
20
23

score 45 · Answer 3 · edited Aug 14 '17 at 20:56

45

Simple as below

<button [class.btn-success]="mouseOvered" 
  (mouseover)="mouseOvered=true"
  (mouseout)="mouseOvered=false"> Hover me </button>

LIVE DEMO

edited Aug 14 '17 at 20:56

isherwood

58,414
16
114
157

answered Mar 06 '17 at 18:47

Aravind

40,391
16
91
110

3

What if you have more than one button? You want to change the class only for the one you are hovering, not all of them. Is there a way to achieve that? – mario595 Apr 02 '17 at 17:37
@mario595 use a `span` tag and wrap it under a `*ngIf. if you need more info let me know – Aravind Apr 02 '17 at 17:53
@Aravind can you please provide an example? I am finding that each button is getting the class changed instead of only the one that is hovered upon. – Warren Crasta Mar 16 '18 at 18:23
Can you check the plunker in the demo – Aravind Mar 17 '18 at 17:42
your ans helped me @Aravind. Thanks – Bijay Singh Jul 26 '18 at 06:44
1

Worked perfectly. But we need to define variable mouseOvered: boolean; in .ts file. – Chandan Y S Sep 20 '20 at 05:10

score 2 · Answer 4 · edited Oct 18 '22 at 19:59

In case you set the styles programmatically (e.g. from an attribute in the component) and want it to change on hover, you can have a look at this Plunker demo.

It also answers the question when multiple elements have to respond to the mouseover event.

Here is the code:

@Component({
    selector: 'app',
    template: `
    <div id="1" 
      (mouseover)="showDivWithHoverStyles(1)" 
      (mouseout)="showAllDivsWithDefaultStyles()" 
      [ngStyle]="hoveredDivId ===1 ? hoveredDivStyles : defaultDivStyles">
      The first div
    </div>
    
    <div id="2" 
      (mouseover)="showDivWithHoverStyles(2)" 
      (mouseout)="showAllDivsWithDefaultStyles()" 
      [ngStyle]="hoveredDivId === 2 ? hoveredDivStyles :  defaultDivStyles">
      The second div
    </div>`
})
class App{
  hoveredDivId;
  defaultDivStyles= {height: '20px', 'background-color': 'white'};
  hoveredDivStyles= {height: '50px', 'background-color': 'lightblue'};
  
  showDivWithHoverStyles(divId: number) {
    this.hoveredDivId = divId;
  }

  showAllDivsWithDefaultStyles() {
    this.hoveredDivId = null;
  }
}

score 2 · Answer 5 · edited Oct 12 '22 at 09:09

I took Davut's example and changed it to handle multiple classes...

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.update('add');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.update('remove');
    }

    protected update(action: string): void {
        this.hoverClass.split(' ').forEach(item => this.elementRef.nativeElement.classList[action](item));
    }
}

score 1 · Answer 6 · edited Oct 12 '22 at 16:39

1

<li *ngFor="let q of questions;let i = index" class="list-group-item" (mouseenter)="isHover = i"
    [ngClass]="{'active' : isHover === i}">
    <h5>Question 1</h5>
    <p>what is the largest man made structure on the earth ?</p>
</li>

isHover and questions are properties declare in the .ts file.

edited Oct 12 '22 at 16:39

upe

1,862
1
19
33

answered Jul 14 '20 at 10:18

TOBIN

11
1

score 0 · Answer 7 · edited Oct 14 '22 at 18:37

@HostListener decorator is also a good option if you are applying on entire component.

keep the html as it is and in the component add @HostListener

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

@HostListener('mouseenter') onMouseEnter() {
    this.elementRef.nativeElement.class = 'red';
}
    
@HostListener('mouseleave') onMouseLeave() {
    this.elementRef.nativeElement.class = 'yellow';
}

Adir Dayan · Answer 8 · 2022-10-18T05:30:20.450

0

Shortest solution - HTML only

<span #newTask class="btn"
      [ngClass]="newTask.matches(':hover') ? 'btn-success': 'btn-secondary'"
      (mouseover)="''" (mouseleave)="''"
>
  New
</span>

edited Oct 18 '22 at 05:30

answered Sep 09 '21 at 13:30

Adir Dayan

1,308
13
21

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

8 Answers8

Shortest solution - HTML only

Linked