Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 866
Ajey Avatar asked Mar 06 '17 18:03

Ajey


People also ask

How do I add a class to an element in HTML?

To add a class to an element rather than replacing its existing classes, use the += operator instead. Note, it is important to prefix the new classname with space; otherwise, one of the existing classes of an element is lost.

Can you use hover on a class?

CSS – Div class hover Hover effect can be directly given to the elements but when it is applied to a particular element like div then the hover effect will be reflected to all the div elements. Using a class to apply the hover effect, gives us a choice to apply it on selective elements.

How do you toggle a class on hover?

hover(function () { $("li#rs1"). addClass("active"); //Add the active class to the area is hovered }, function () { $("li#rs1"). addClass("not-active"); }); });


2 Answers

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);   }  } 
like image 62
Davut Gürbüz Avatar answered Oct 12 '22 04:10

Davut Gürbüz


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'" 
like image 27
Dylan Avatar answered Oct 12 '22 03:10

Dylan