边缘，悬停和点击

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

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