javascript - 边缘、悬停和单击

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>然后我将按钮风格化，使其看起来与选项相同。