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

Question

我想在角度8的剑道菜单项悬停时隐藏div元素。我想在kendo-menu-item“我们做什么”的悬停时隐藏一个类别为“ 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

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

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

并且在此功能中yourFun()更改display-style，当光标悬停在mouseover应用的元素上（如悬停）时触发。