Как сделать fadeIn/fadeOut с помощью css3?

Question

[lightalex]

Всем привет!
Есть блок для которого задано:

display: none; 
opacity: 0;

Вопрос, как сделать через css, чтобы при hover этот блок плавно появлялся, а при blur (то есть при выведении мышки с блока) плавно исчезал?
Возможно это можно как-то реализовать через animation?
Но увы так и не смог сам сделать это(

Comments

[Евгений Петров]

lightalex: Откройте тайну — как можно навести курсор на блок с display:none?

Answer 1

[lnked]

jsfiddle.net/pzbgj96a

Comments

[lightalex]

Очень крутое решение)
Спасибо)

[Senseich]

lnked , а для чего в вашем примере visibility ? как бы с одним opacity так же работает. Может я чего то не понимаю?

[lightalex]

Senseich, visibility физически убирает блок
А opacity только делает его прозрачным, но кликнуть (например) по блоку все равно можно

[Senseich]

lightalex, ясно, своего рода подстраховка

[lightalex]

Senseich, ну не только подстраховка :)
Допустим есть на сайте модальное окно, которое вылазит поверх всех блоков
Если использовать только opacity, то нельзя будет кликнуть по самому сайту, потому что сайт будет загорожен прозрачным модальным окном

[Senseich]

lightalex, это да. вот кстати интересно, раньше не обращал внимание. В этом примере если навести на скрытый блок, он появляется, хотя ховер стоит на родителе .parBlock:hover .thisBlock. Получается все потомки которые выпирают из родителя тоже подвергаются ховеру?

[lightalex]

Senseich, конечно :)

[Senseich]

lightalex, что то я загнался ))

Answer 2

[denidip]

Решение через visibility: hidden; https://jsfiddle.net/jmzpvm2e/4/

Comments

[lightalex]

Вот вы как раз столкнулись с той же проблемой что и я
Если убрать курсор с блока, все резко исчезает
Такого не должно быть

[denidip]

дальше думаю справитесь... https://jsfiddle.net/jmzpvm2e/4/

[lightalex]

Спасибо
Можете отредактировать свой ответ чтобы я смог отметить его решением?

[denidip]

готово)

Answer 3

[Егор Федосенко]

Убрать display: none
Добавить transition: opacity 0.5s linear
На hover задать opacity: 1

Comments

[lightalex]

Так display: none не зря же стоит
Иначе можно будет вызвать hover с этого блока когда opacity 0
На самом деле сейчас вызов происходит вот так вот
.parBlock:hover .thisBlock {
display: block;
opacity: 1;
}
То есть hover впринципе идет через родителя

Answer 4

[R R]

гугль пробовали? bavotasan.com/2011/a-simple-fade-with-css3

Comments

[lightalex]

А вы вчитываться в вопрос?)
Проблема то в том что у меня кроме opacity есть еще и display...

[R R]

lightalex: чем вызвана необходимость полностью скрывать элемент? Если так, то можно попробовать через родительский элемент по событию аналогично отображать/скрывать элемент.

[lightalex]

Необходимость вызвана тем что речь идет о выпадающем меню
Раньше реализовывал через jquery
А теперь решил замутить сайт на css3 (насколько это возможно конечно)
Ну так и делаю
На самом деле сейчас вызов происходит вот так вот
.parBlock:hover .thisBlock {
display: block;
opacity: 1;
}

Answer 5

[Роман]

попробуйте вместо дисплея, уменьшить высоту элемента до 0. Конечно это уже будет slide-down/up эффект.

Comments

[lightalex]

Увы slide-down/up не подходит :(