Как после анимации css скрыть блок от наведения (display:none) так чтобы это было красиво?

Question

[Вячеслав Яшников]

Здравствуйте,
Столкнулся с проблемой:
При наведении на метку справа от нее появляется блок, как сделать так чтобы этот блок был display none, затем при наведении он анимированного появлялся а затем при уходе курсора с этого блока или мышки он должен анимировано пропадать и затем переходить в display: none.

пример тут: map-8f9f12.webflow.io

Видео почему мне это нужно сделать: https://dl.dropbox.com/s/tzzw91b2i58o1ic/map-marker.mp4

(блок не пропадает и поэтому при наведении на него снова появляется)

Answer 1

[Aleksey Solovyev]

Задайте блоку: pointer-events: none; когда он скрыт. Когда он появляется pointer-events: auto;

Comments

[Вячеслав Яшников]

В таком случае если другая метка будет под этим блоком она будет неактивна и недоступна для наведения

[Aleksey Solovyev]

Вячеслав Яшников, что? Какая метка?

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

https://jsfiddle.net/fqpuc4tg/

Пока Вы не наведете мышь на метки uno или dos Вы никак не можете взаимодействовать с внутренним блоком. Можно сказать: "его не существует на странице" = display: none

https://jsfiddle.net/fqpuc4tg/11/

Что в это примере Вам не так?

Answer 2

[ixon]

Уменьшайте opacity с 1 до 0, когда оно достигнет 0, ставьте display:none.

Comments

[Вячеслав Яшников]

Это через keyframes можно?

[Вячеслав Яшников]

Вячеслав Яшников, с уходом блока все понятно, там display:none и все решено, но как обратно его вернуть плавно