Блог

Главная - Вопросы по программированию - Edge, наведите указатель мыши и щелкните

Edge, наведите указатель мыши и щелкните

#javascript #html #css #angular #microsoft-edge

#javascript #HTML #css #угловой #microsoft-edge

Вопрос:

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

Это отлично работает в 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. Я заметил, что при добавлении <button> в div и щелчке по этому элементу меню работает правильно и остается открытым. Похоже, это какая-то ошибка совместимости edge с <select> и событием наведения курсора мыши на родительские элементы.

Ответ №1:

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