javascript - 如何在鼠标悬停父元素时显示子 div？

我正在使用 Angular 6 和 TypeScript 来制作一个应用程序，我需要点击时打开子 div，并且在鼠标悬停父元素时也打开子 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。

工作中的 stackblitz https://stackblitz.com/edit/angular-t5ahud

答案＃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

答案＃2

请像下面这样修改代码。

(mouseover)="openCurrentOrder(item)"

工作副本已在以下链接更新。

正在运行的 stackblitz https://stackblitz.com/edit/angular-t5ahud