Как реализовать вывод дополнительной информации для наведении?

Question

[evgemiil]

Подскажите пожалуйста как реализовать вывод дополнительной информации при наведении курсора на блок. Я так понимаю с помощью javascript можно реализовать это?
joxi.ru/V2VaNzMu06o19m

Answer 1

[Ankhena]

JS или на чистом CSS, если скрытый блок вложен в родительский или рядом.

Суть в том, что доп.информация сначала скрыта display:none
При hover она показывается.

codepen.io/anon/pen/pNvpWq (тут он открывается в сторону, но сути не меняет)

Comments

[evgemiil]

как считаете на чем лучше JS или CSS? на css я примерно знал, но вот чтобы плавно выводилось это наверно на JS? спасибо

[Ankhena]

evgemiil: наверное, плавно можно и через opacity, но не уверена, что будет хорошо.
Чем лучше? Я CSS больше люблю, чем JS, поэтому если можно обойтись без JS, то и прекрасно. А так каждый для себя и для задачи выбирает.

[evgemiil]

Ankhena W: спасибо еще раз, буду разбираться, начинающий только)

[evgemiil]

Ankhena W: еще вопросик а opacity 'это прозрачность, а с плавным сдвигом тут без скрипта не обойтись думаю?

[Ankhena]

evgemiil: если сдвиг, это изменение высоты, то не обойтись

Answer 2

[Ivan Bogachev]

Как верно заметила Ankhena W решение на чистом CSS вполне работает. Но стоит помнить, что это действие должно происходить не только на :hover, но и на :focus (есть люди, работающие с клавиатуры). Соответственно к элементу, на который вешается hover и focus, скорее всего будет нужно добавить tabindex = 0, чтобы дать этим людям возможность перемещаться по вашим элементам с помощью tab. Пример с плавным появление дополнительной информации: codepen.io/sfi0zy/pen/KNwZGE?editors=1100