How to display additional information for hovered?

Please tell me how to implement the display of additional information when the cursor is on the block. I understand using javascript to implement this?
July 2nd 19 at 18:55
2 answers
July 2nd 19 at 18:57
JS or pure CSS, if the hidden unit is nested in the parent or nearby.

The point is that extra information is hidden display:none
When you hover it shows up. (then it is to be opened to the side, but does not change the fact)
how do you think what is better, JS or CSS? on css I knew about, but to smoothly output it's probably in the JS? thank you - Loy_Cruickshank commented on July 2nd 19 at 19:00
: probably smoothly through opacity, but not sure that will be fine.
What is better? I like CSS more than JS, so if you can do without JS, then fine. And so each for himself and for the task choose. - Elmer.Upt commented on July 2nd 19 at 19:03
: thanks again, I will understand, beginner only) - Loy_Cruickshank commented on July 2nd 19 at 19:06
: another question and opacity 'is the opacity, and with a smooth shift immediately without script not do you think? - Loy_Cruickshank commented on July 2nd 19 at 19:09
if the shift is a change in the height, it can not do - Elmer.Upt commented on July 2nd 19 at 19:12
July 2nd 19 at 18:59
As rightly said solution with pure CSS, work quite well. But we should remember that this action should occur not only on :hover, but also on :focus (there are people working from the keyboard). Respectively to the element, that hung on hover and focus, most likely will need to add tabindex = 0 to give these people the ability to navigate through your items using the tab. Example with smooth appearance for more information:

Find more questions by tags JavaScriptHTML