Как добавить класс к элементу при наведении?

Как добавить класс в div, когда завис на div.

Шаблон -

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

Составная часть -

import {Component} from 'angular2/core';

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

    .yellow {
      background: yellow;
    }

  ']
})
export class HelloWorld {
}

демонстрация

[ПРИМЕЧАНИЕ - я специально хочу добавить новый класс, а не изменять существующие классы]

Вздох! Это такой нормальный вариант использования, и я пока не вижу прямого решения!

Ответы

Ответ 1

Вы также можете просто использовать что-то вроде:

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

Тогда в компоненте

color:string = 'red';

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

Plunker

В качестве альтернативы, сделайте все в разметке:

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

Ответ 2

Просто, как показано ниже

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

LIVE DEMO

Ответ 3

Если вы устанавливаете стили программно (например, из атрибута в компоненте) и хотите, чтобы он изменялся при наведении, вы можете посмотреть эту демонстрацию Plunker.

Он также отвечает на вопрос, когда несколько элементов должны реагировать на событие mouseover.

Вот код:

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

Ответ 4

@HostListener Декоратор также является хорошим вариантом, если вы применяете весь компонент.

сохранить html как есть, а в компоненте добавить @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';
  }