Управление задержкой display:none

#transition #css

Добрый день.
Есть задача: сделать задержку скрытия элемента (меню второго уровня). Как это сделать
на 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.
Как это реализовать?    

Ответы

Ответ 1

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


Ответ 2

Вы не сможете навести мышь на элемент который не занимает место в DOM, т.е. у которого
стиль display: none;
Попробуйте через 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;
}


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