Jak dodać klasę do elementu po najechaniu myszą?

Question

Jak dodać klasę do div, gdy unosi się na 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

[UWAGA - I specjalnie chcesz dodać nową klasę i nie modyfikować istniejących klas]

Sigh ! Jest to normalny przypadek użycia i nie widzę jeszcze żadnego prostego rozwiązania!

Answer 1

Można też po prostu użyć czegoś podobnego.

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

Następnie w składniku

color:string = 'red'; 

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

Plunker

Answer 2

Proste jak poniżej

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

LIVE DEMO

Answer 3

W przypadku ustawionej style programowo (np atrybutu w składniku) i chce to zmienić przy aktywowaniu, można mieć spójrz na this Plunker demo.

Odpowiada również na pytanie, kiedy wiele elementów musi odpowiedzieć na zdarzenie mouseover.

Oto kod:

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

Answer 4

@HostListener dekorator jest również dobrym rozwiązaniem, jeśli są stosowane na całym komponentu.

utrzymać html jak to jest i w składniku dodać @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'; 
    }