Edge, Hover и Click - PullRequest
Новая
       51

Edge, Hover и Click

0 голосов
/ 04 марта 2019

Предполагается, что это всплывающее меню, которое открывается при наведении курсора на пользователя.

Это прекрасно работает в 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;

1 Ответ

0 голосов
/ 05 марта 2019

Я почти уверен, что это какая-то ошибка с хорошим старым знаком, и может быть обходной путь, чтобы заставить это работать правильно, но то, что я сделал в этом случае, было удалено <select> и заменено наngFor <button>, тогда я стилизовал кнопку так, чтобы она выглядела так же, как и параметры.

...