web-dev-qa-db-fra.com

Comment puis-je ajouter une classe à un élément en survol?

Comment ajouter une classe à une div lorsque vous la survolez.

Modèle -

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

Composant -

import {Component} from 'angular2/core';

@Component({
  selector: 'hello-world',
  templateUrl: 'src/hello_world.html',
  styles: [`
    .red {
      background: red;
    }

    .yellow {
      background: yellow;
    }

  `]
})
export class HelloWorld {
}

démo

[NOTE - Je veux spécifiquement ajouter une nouvelle classe et ne pas modifier les classes existantes]

Soupir! C'est un cas d'utilisation normal et je ne vois pas encore de solution simple!

angularangular2-template
27
Ajey

Vous pouvez aussi simplement utiliser quelque chose comme:

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

Puis dans le composant

color:string = 'red';

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

Plunker

Sinon, faites tout dans le balisage:

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

Simple comme ci-dessous

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

LIVE DEMO

19
Aravind

Si vous définissez les styles par programme (par exemple à partir d'un attribut du composant) et souhaitez le modifier en survol, vous pouvez consulter cette démonstration de Plunker .

Il répond également à la question lorsque plusieurs éléments doivent répondre à l'événement mouseover.

Voici le 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;
  }
}
1
Aurelien Giraud

Ne pas salir le code que je viens de coder simple hover-class directive.

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

échantillon en cours d'exécution

éditeur de code stackblitz

Ci-dessous la 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);
  }

}
0
Davut Gürbüz

@HostListener Le décorateur est également une bonne option si vous appliquez sur un composant entier.

conservez le code HTML tel quel et dans le composant 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';
  }
0
Aniruddha Das