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>，然后将按钮的样式设置为与选项相同。

边缘，悬停和单击

1 个答案: