Question

我正在尝试使用Angular 2/4在悬停时向元素添加一个类。

我只需要将类添加到'this'元素，因为我想在多个元素上使用此函数，但只希望将类添加到悬停的元素上。

我在想这样的事情：

HTML

<fieldset class="help-hover">
<div class="question-wrapper">
  <label class="question" for="quoteFormTitle">Your title</label>
  <div class="answer">
    <select formControlName="quoteFormTitle" id="quoteFormTitle" class="chosen-select">
      <option value="" disabled>Choose a title...</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Ms">Ms</option>
      <option value="Doctor Male">Doctor - Male</option>
      <option value="Doctor Female">Doctor - Female</option>
    </select>
    <span class="tick-area"></span>
    <div class="error" *ngIf="quoteFormTitle.touched && quoteFormTitle.invalid">Please select a title.</div>
  </div>
</div>
<aside class="help">
  <p>Please select your title from the drop down list.</p>
</aside>

TS

helpHover() {
  ...
}

已尝试过几十种不同的技术，但无法使其发挥作用。

任何帮助都会很棒。

由于

Answer 1

您可以定义一个类成员来保存鼠标下的元素：

export class MyComponent {
  isHovered: HTMLElement;
}

isHovered的值将设置为mouseover上的目标元素，并在mouseleave上重置。该类将应用于与isHovered对应的元素。

<div #div1 [ngClass]="{'show-help': isHovered === div1 }" (mouseover)="isHovered = $event.target" (mouseleave)="isHovered = null"></div>

<div #div2 [ngClass]="{'show-help': isHovered === div2 }" (mouseover)="isHovered = $event.target" (mouseleave)="isHovered = null"></div>

<div #div3 [ngClass]="{'show-help': isHovered === div3 }" (mouseover)="isHovered = $event.target" (mouseleave)="isHovered = null"></div>

您可以在this stackblitz中测试代码。

Answer 2

试试这个：

<fieldset (mouseover)="addClass($event)" (mouseleave)="removeClass($event)">Hello</fieldset>

在组件中：

  addClass(event): void {
    event.target.className += 'myClass';
  }

  removeClass(event): void {
    event.target.className = event.target.className.replace('myClass', '');
  }

使用Angular 2/4函数在悬停时向此元素添加类

2 个答案: