6

Добрый день.

Есть задача: сделать задержку скрытия элемента (меню второго уровня). Как это сделать на JS - догадываюсь, но хотелось бы обойтись одним CSS.

Если вместо display использовать visibility, то все хорошо:

.menu.second {
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.menu.second:hover {
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

Но мне необходимо именно display:block и display:none.

Как это реализовать?

9
  • Так вроде бы свойства display не поддерживаются transition.
    – Deonis
    18 ноя 2013 в 10:51
  • @Deonis, можно ли как-то по-другому реализовать подобный эффект (задержка display:none) только с помощью CSS? 18 ноя 2013 в 10:54
  • 1
    а можно узнать какая необходимость может быть вообще для использования display: none ?
    – zb'
    18 ноя 2013 в 11:04
  • @zb' очевидно в том, чтобы объект не занимал места на странице. Других необходимостей просто не бывает. Даже метод исключения перед одним вариантом бессилен. 28 мар 2017 в 16:59

2 ответа 2

3

Так же можно и width и height поставить 0 , задержка будет работать , на display transition не отрабатывает , либо применять js.

0
  1. Вы не сможете навести мышь на элемент который не занимает место в DOM, т.е. у которого стиль display: none;
  2. Попробуйте через position: absolute;. т.е. как-то так.

    .menu.second {
      position: absolute;
      visibility:hidden;
      opacity:0;
      transition:visibility 0s linear 0.5s,opacity 0.5s linear;
    }
    .menu.second:hover {
      position: static;
      visibility:visible;
      opacity:1;
      transition-delay:0s;
    }
    

    Но проблема с активацией объекта (наведением мыши) остаётся.

1
  • Но мне необходимо именно display:block и display:none - это требование из задание.
    – MihailPw
    17 мая 2017 в 13:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.