Событие выпадающего списка пароля Firefox убирает наведение из меню

avatar
Kaboom
9 августа 2021 в 07:12
59
0
0

У меня есть раскрывающееся меню на чистом CSS, которое отображается при наведении курсора на родительский элемент или расширением при наведении курсора на дочерний элемент, который отображается после наведения.

Я решил добавить меню входа в раскрывающийся список, и хотя все отображается правильно, когда вы нажимаете на поле имени пользователя - всплывает автозаполнение из firefox, предлагающее сохраненные пароли для сайта, и вызывает следующую ошибку.

При наведении курсора на раскрывающийся список пароля или имени пользователя (а не на сам ввод) из firefox элемент списка и дочернее меню теряют свое состояние наведения, так как теперь пользователь вместо этого наводит курсор на сгенерированное Firefox меню. Это приводит к потере пользовательского меню. эффект наведения, закрытие меню. Это очень раздражает пользователя (и меня).

Вот GIF, показывающий, что происходит (проще увидеть, чем объяснить)

Visualization of effect

Вот код:

<ul class="navigation">
    <li class="dropdown">
        <a href="javascript:void(0);">Account</a>
        <div class="dropdown-content">
            <input type="text" name="username" value="">
        </div>
    </li>
</ul>

и соответствующий CSS:

.navigation{position:relative;}
.navigation .dropdown-content{display:none;position:absolute;top:50px;}
.navigation .dropdown:hover .dropdown-content{display:block;}

Есть ли способ предотвратить наведение курсора на это меню?

Источник
GucciBananaKing99
9 августа 2021 в 11:00
0

Вы можете добавить что-то вроде. input:focus ~ .dropdown { display: block; }

Ответы (0)