主页 / 问题 / 858040
Accepted
Aleksey exec
Asked:2020-07-20 16:13:47 +0000 UTC2020-07-20 16:13:47 +0000 UTC

将鼠标悬停在一个元素上时，更改另一个元素的类？

  • 772

我创建了指令。

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appHover]'
})


export class HoverDirective {

    @HostBinding( 'class.under' ) isunder = false;



    @HostListener( 'mouseenter' ) OnEnter(){
      this.isunder = true
    }

    @HostListener( 'mouseleave' ) OnLeave(){
      this.isunder = false
    }

}

将鼠标悬停在第一个导航上时

  <nav appHover> nav 1</nav>
  <nav> nav 2</nav>

样式应用于它

.under
    text-decoration: underline

如何将悬停在第一个导航上应用样式到第二个导航？

angular5

1 个回答

  1. Best Answer

    你可以使用native APItype document.querySelector.classList.toggle，但这不是 Angular 的方式。只需在第一个上放置一个事件处理程序nav并将第二个声明nav为模板变量：

    <nav (mouseover)="onMouseover()" (mouseleave)="onMouseleave()">nav 1</nav>
<nav #nav>nav 2</nav>

    在组件中：

    @ViewChild('nav')
public nav: ElementRef<HTMLElement> = null;

constructor(private renderer: Renderer2) {}

public onMouseover(): void {
    this.renderer.addClass(this.nav.nativeElement, 'under');
}

public onMouseleave(): void {
    this.renderer.removeClass(this.nav.nativeElement, 'under');
}
    • 0

相关问题