Как реализовать display:none с задержкой с использованием только css?

Question

[Max]

Задача такова. Нужно сделать что бы блоку давалось свойство display:none через несколько секунд после отведения курсора от него. То есть на :hover display:block, на Не ховер display:none, но с задержкой. Без испрльзования Jquery!!!!

ul.main-menu>li:hover .white-text-bgc{
    display: block;
    background-color: #FFF;
}
.white-text-bgc{
    background-color: #FFF;
    display: none;
    border:1px solid #a6a6a6;
}

Answer 1

[Александр Петров]

Используйте не display, а visibility.
Пример

Comments

[user_tm]

Пример не грузится

Answer 2

[Александр]

для подобного рода задач как раз и придумали javascript

Comments

[Max]

Для JS нужно переделать все меню.. Я надеялся что и на css хоть что-то есть.

[eugene_d_dev]

Max: Переделать все меню? Да там пару строчек, о чем вы?)))

[Max]

fajjet: с JS появляется ряд своих проблем. С самого начала у меня и было меню на Jquery. Я понимаю, что вы думаете прописать .css("display","block") и none где нужно)) Я и тогда задавал вопрос, но ответ не нашел.

Answer 3

[Дмитрий Ким]

HTML:
<div><span>Hello World!</span></div>
CSS:

div span {
  transition: opacity 0.5s ease-in 0s;  
}
div:hover span {
  opacity: 0;    
}

Comments

[Александр Петров]

С одним лишь opacity проблема в том, что при наведении на прозрачный спан, ховер тоже будет срабатывать. А это не всегда нужно. В случае с выпадающим меню это как раз будет плохое поведение.

[Max]

Александр Петров: В точку! Я так уже делал)