如何在角度 8 中悬停剑道菜单项时显示或隐藏 div

Question

我想在 Angular 8 的 kendo-menu-item 悬停时隐藏一个 div 元素。 我想在 kendo-menu-item "what we do" 悬停时隐藏一个类为 "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-eventlike：

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

并且在这个函数中 yourFun() 更改 display-style ，当光标在 mouseover 应用元素上时触发（如悬停）。