Javascript Angular 2：如何实现悬停上下文菜单功能

我想实现一个类似于Google收件箱悬停上下文菜单的组件：

想知道如何以可重用的方式实现它，我主要担心的是：

我应该如何正确地显示/隐藏它

我如何正确地安排它的位置

---

欢迎任何帮助。

我可能会在菜单项组件中添加一些代码，这将触发悬停时的

display:block

和

display:none

。如果您使用

*ngFor

显示菜单项，它看起来是实现所需功能的最简单方法

猜测您的代码如下所示：

<ul class="menu-list">
    <li *ngFor="let item of menu.items" class="menu-item">
        <span class="content"> <!-- content --> </span>
        <span class="date-and-check"> <!-- date and check mark --> </span>
        <span class="submenu"></span>
    </li>
</ul>

.menu-list .menu-item {
    width: calc(100% - 80px);
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 .menu-list .menu-item date-and-time {
    width: 80px;
    height: 40px;
 }

 .menu-list .menu-item .submenu {
    width: 100px;
    height: 40px;
    display: none;
 }

.menu-list .menu-item:hover {
    width: calc(100% - 100px);
}

.menu-list .menu-item:hover .date-and-time {
    display: none;
}

.menu-list .menu-item:hover .submenu {
    display: inline-block;
}