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

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