Блог

Главная - Вопросы по программированию - Задержка наведения курсора мыши в выпадающем меню JavaScript CSS

Задержка наведения курсора мыши в выпадающем меню JavaScript CSS

#javascript #css #menu #hover #dropdown

#JavaScript #css #меню #Наведение курсора #Выпадающий

Вопрос:

У меня возникли некоторые проблемы с созданием выпадающего меню с возможностью перемещения внутри панели навигации. Я довольно новичок в javascript и css, но имею опыт работы с другими языками. Я не могу понять, как отложить мои выпадающие меню, чтобы они стали видимыми. Прямо сейчас мое выпадающее меню мгновенно показывает момент, когда вы наводите курсор на родительское меню. Я использую это для шаблона описания, и было бы идеально решить эту проблему.

Я пытался использовать переходы и настраивать свой код, но не могу найти правильный способ сделать это. Я подозреваю, что одна из причин заключается в отображении: блок. Я пропустил любой код, который использовался при попытке реализовать задержку. Это исходный код меню.

Вот мой код:

                         ul{
                            border-style: groove;
                            padding: 0;
                            list-style: none;
                            background: #f2f2f2;
                        }
                        ul li{
                            display: inline-block;
                            position: relative;
                            line-height: 21px;
                            text-align: left;
                        }
                        ul li a{
                            display: block;
                            padding: 8px 25px;
                            color: #333;
                            text-decoration: none;

                        }
                        ul li a:hover{
                            color: #fff;
                    background-color:#939393;
                  
                        }
                        ul li ul.dropdown{
                            min-width: 100%; /* Set width of the dropdown */
                            background: #f2f2f2;
                            display: none;
                            position: absolute;
                            z-index: 999;
                            left: 0;
                        }
                        ul li:hover ul.dropdown{
                            display: block; /* Display the dropdown */
                        }
                        ul li ul.dropdown li{
                            display: block;
                        }

Комментарии:

1. вы хотите, чтобы он отображался медленно, например, исчезал? или просто подождать некоторое время, а затем сразу показать?

2. Я бы хотел, чтобы он подождал некоторое время, а затем слегка исчез. Может быть, .2 секундное затухание. Так что я думаю, что немного и того, и другого. Прямо сейчас он сразу показывает выпадающее меню, и поскольку оно является частью оболочки описания, иногда пользователь может захотеть прокрутить страницу вниз до более важной информации без появления каких-либо меню.

3. ну, если вы хотите эффект типа затухания, вам, вероятно, придется изменить css transition opacity -свойство с 0 на 1. Вы не можете transition (анимировать) свойство css display

4. Хорошо, спасибо за информацию. Я пытаюсь это реализовать, но у меня все еще возникают проблемы. Есть идеи, как я мог бы реализовать это с помощью текущего кода, который у меня есть?

Ответ №1:

В CSS:

 ul li ul.dropdown.show{
  display:block;
}

В JavaScript:

 const dropdowns = document.querySelectorAll('ul li ul.dropdown');
for(let q of dropdowns){
  q.onmouseenter = function(){
    setTimeout(()=>{ 
      this.classList.add('show'); 
    }, 1000);
  }
  q.onmouseleave = function(){
    this.classList.remove('show');
  }
}

Это всего лишь базовая концепция. Я бы использовал CSS transition .