边缘、悬停和单击

Question

这应该是一个弹出菜单，当用户悬停时打开。

这在 Chrome 中运行良好，我已经尝试了多种方式(使用 CSS:hover、(mousenter) 和 (mouseleave) 问题是 - 使用 Edge 时，将鼠标悬停在我的弹出菜单上，然后单击选择框中的项目 - 然后触发mouseout/mouseleave。(或触发停止悬停)直到再次移动鼠标。

这非常令人沮丧，因为显然鼠标仍在悬停在div 上，而div 元素应该保持打开状态。有什么想法吗？

.HTML：

<div class="flyoutmenu" [ngClass]="{'flyoutmenuhover': this.hoveringFlyOutMenu}" (mouseover)="this.hoveringFlyOutMenu = true;" (mouseout)="this.hoveringFlyOutMenu = false;">   
<select [(ngModel)]="selectedAccountNumber" size="20" multiple="false">
<option *ngFor="let account of accounts" >
{{account}}
</option>   
</select> 
</div>

.CSS：

.flyoutmenu {
z-index: 1000;
display: block;
position: absolute;
left: 0px;
top:0px;
bottom:0px;
margin-top:100px;
margin-bottom:100px;
width:40px;
overflow: hidden;
background-color: white;
border: 5px solid gray;
border-left: none;
transition: 0.5s ease-in-out;
select {
width: 100%;
min-height: 100%;
}
}
// .flyoutmenu:hover {
//   width:300px!important;
//   transition: 0.5s ease-in-out;
// }
.flyoutmenuhover {
width:300px;
transition: 0.5s ease-in-out;
}

部分 TS：

public accounts = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test1', 'test2', 'test3', 'test4', 'test5', 'test6'];
public selectedAccountNumber = '';
public hoveringFlyOutMenu = false;

Answer 1

我很确定这是某种具有良好优势的错误，并且可能有一种解决方法可以使其正常工作，但是在这种情况下我所做的是删除<select>并将其替换为ngFor<button>然后我风格化了按钮，使其看起来与选项相同。