边缘、悬停和单击答案

【问题标题】：Edge, Hover, and Click边缘、悬停和单击
【发布时间】：2019-07-26 00:43:00
【问题描述】：

这应该是当用户悬停时打开的飞出菜单。

这在 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;

【问题讨论】：

我注意到，将<button> 添加到 div 并单击该元素时 - 菜单行为正确并保持打开状态。所以这似乎是与<select> 和父项上的悬停事件的某种边缘兼容性错误。

标签： javascript html css angular microsoft-edge

【解决方案1】：

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

【讨论】：