关于angular：如何在悬停时向元素添加类？

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

将鼠标悬停在div时如何向div添加类。

范本-

1	On hover add class".yellow"

零件 -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

然后在组件中

1
2
3
4
5

color:string = 'red';

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

柱塞

或者，执行标记中的所有操作：

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

不要弄脏我刚刚编写的简单hover-class指令的代码。

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

运行样本

代码编辑器stackblitz

在指令下方，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

}

相关讨论

如果您以编程方式设置样式(例如，从组件中的属性)并希望在悬停时更改样式，则可以查看此Plunker演示。

当多个元素必须响应mouseover事件时，它也回答了这个问题。

这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@Component({
selector: 'app',
template: `
<div id="1"
(mouseover)="showDivWithHoverStyles(1)"
(mouseout)="showAllDivsWithDefaultStyles()"
[ngStyle]="hoveredDivId ===1 ? hoveredDivStyles : defaultDivStyles">
The first div

<div id="2"
(mouseover)="showDivWithHoverStyles(2)"
(mouseout)="showAllDivsWithDefaultStyles()"
[ngStyle]="hoveredDivId === 2 ? hoveredDivStyles : defaultDivStyles">
The second 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
2
3
4
5
6
7

<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和问题是在.ts文件中声明的属性。

如果要在整个组件上应用，@HostListener装饰器也是一个不错的选择。

保持html不变，并在组件中添加@HostListener

1
2
3
4
5
6
7
8
9

On hover add class".yellow"

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

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