Как исправить баг на Firefox c select?

Question

[8realdima8]

https://plnkr.co/edit/z2uW4O6D1uLFnsoLjWeb?p=preview

При наведении на блок должен появляться select. когда открываешь select и наводишь на один из вариантов, то варианты сразу пропадают. Данная проблема обнаружена в Firefox, в Chrome все работает нормально. Как исправить?

Answer 1

[Даша Циклаури]

на CSS

<div class="box">
        <div class="select-wrapper">
        <select name="" id="">
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
        </select>
        </div>
      </div>

.select-wrapper{
  display:none;
}
.box:hover .select-wrapper,.select-wrapper:hover{
  display:block;
}

Comments

[8realdima8]

а зачем нужно делать блок select-wrapper?

[Даша Циклаури]

8realdima8, я то откуда знаю зачем у тебя был div над select обернут, можешь без него, мне важно было технику показать

[дядя Фёдор]

Ну не знаю даже, Даша уже дала вам совет, правда добрые люди говорят, что display - штука тяжелая, может как-то так:
https://plnkr.co/edit/w8lsOvZH3nHf3wsNDUZ5?p=preview
В общем, все дело в наследовании, не надо на родительский элемент на события вешать ваши джаваскрипт функции, у option там свои есть обработчики, мозилла, он когда код считывает, если встречает два правила которые друг другу противоречат, то он первое помнит, а второе игнорирует, а хром наобарот, забывает все, что раньше прочитал, и назначает последнее, вот и получилось, что в хроме работает, а в мозилле - нет.

[Даша Циклаури]

дядя Фёдор, это называется event bubbling и event capturing ;)