如何在angular 8中显示或隐藏kendo菜单项悬停时的div

Question

我想在angular 8中的kendo菜单项的悬停时隐藏div元素。我想在kendo菜单项的悬停时隐藏类为"nav-flyout“的div。

这是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

您需要在kendo-menu-item中添加mouse-event，如下所示：

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

在此函数中，yourFun() change display-style在光标位于mouseover应用的元素上时触发(如悬停)。