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

Question

我正在使用 angular 6 和打字稿制作一个应用程序，我需要在点击和悬停父项时打开子项 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

Answer 1

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

<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)"

工作副本已在下方更新link。

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

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

How to open a child div on hover parent?

html

javascript

mouseover

typescript

angular