Question

我正在使用angular 6和Typescript进行申请，并且需要在单击以及悬停父项时打开子div。

现在从点击事件开始，一切正常，但无法执行onmouseover事件。

HTML

<ul class="list-unstyled">
    <li *ngFor="let item of items">
        {{item.order}}
        <button (onmouseover)="openCurrentOrder(item)" (click)="openCurrentOrder(item)"> Click/Hover here to open order {{item.id}} </button> <br>
        <div class="list-items inner-list-items" *ngIf="item.isActive">
            opened order {{item.id}}
        </div>
    <br><br><br>
    </li>
</ul>

Ts

  items: any = [
    {id: "1",order: "one", isActive: false},
    {id: "2",order: "two", isActive: false},
    {id: "3",order: "three", isActive: false},
    {id: "4",order: "four", isActive: false},
    {id: "5",order: "five", isActive: false},
  ]

  isActive: boolean = false;

  openCurrentOrder(item) {
    item.isActive = !item.isActive;
    console.log("opened");
  }

请帮助我将鼠标悬停在该按钮上以打开子div，就像单击该按钮一样。

解决方案需要使用纯Javascript / Typescript ，且不使用jquery。

正在工作的闪电战 https://stackblitz.com/edit/angular-t5ahud

Answer 1

Angular中没有onmouseover事件，您可以使用内置的mouseenter和mouseleave Angular事件代替：

<button
  (mouseenter)="openCurrentOrder(item)"
  (mouseleave)="closeCurrentOrder(item)"
  (click)="toggleCurrentOrder(item)">
  Click/Hover here to open order {{item.id}}
</button>

STACKBLITZ

Answer 2

请如下更改代码。

(mouseover)="openCurrentOrder(item)"

工作副本已在下面的链接中更新。

正在工作的堆叠https://stackblitz.com/edit/angular-t5ahud

如何在悬停父对象上打开子div？

2 个答案: