Как отобразить или скрыть div при наведении на элемент кендо-меню в angular 8

Question

Я хочу скрыть элемент div при наведении курсора на элемент кендо-меню в angular 8. Я хочу скрыть div, класс которого «nav-flyout», при наведении курсора на элемент кендо-меню «Что мы делаем» "

Вот код html

<div class="toolbar navbar" role="banner">
  <span><h3>My Project</h3></span>
  <div class="spacer"></div>
  <kendo-menu class="navbar">
    <kendo-menu-item
      [cssClass]="'what-we-do'"
      text="What We Do"
      url="/whatwedo"
    ></kendo-menu-item>
    <kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
    <kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
    <kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
    <kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
  </kendo-menu>
  <button kendoButton [primary]="true">Let's Talk</button>
  <div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
  <div id="what-we-do-flyout" class="nav-flyout">
    <div class="row-fluid center">
      <div class="span4">
        <h3 class="loop-title">
          <a href="">
            <span class="green">Website</span> Design</a>
        </h3>
      </div>
    </div>
  </div>
</div>

Любая помощь будет оценена.

Answer 1

вам нужно добавить mouse-event в kendo-menu-item, например:

<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>

и в этой функции yourFun() изменить display-style, срабатывает, когда курсор находится над наведением курсора применяемый элемент (например, при наведении).