Как открыть дочерний 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

Пожалуйста, измените код, как показано ниже.

(mouseover)="openCurrentOrder(item)"

Рабочая копия обновлена ​​по ссылке ниже.

Рабочий стекблиц https://stackblitz.com/edit/angular-t5ahud

Answer 2

В 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