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

Question

我想实现，其行为像谷歌收件箱组件悬停上下文菜单：

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

1. 我应该如何设法正确显示/隐藏它？
2. 如何正确安排它的位置？

任何帮助，欢迎。

Answer 1

我可能会在菜单项组件中添加一些代码，这会在悬停时触发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> 

然后CSS将类似于此：

.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; 
}