What to do with the hover pseudo-class?

I have one unit. Inside this block there are 4 block of the same width and height. How to make so when you hover over each of the 4-Oh of blocks there was one block on the bottom and 4 upper block remained in their places, and the new block to appear right under them.
June 7th 19 at 14:50
2 answers
June 7th 19 at 14:52
Solution
Adds style to an element when you hover
For example
a:hover {
text-decoration:none;
} - mabelle.Marvin commented on June 7th 19 at 14:55
I did so, but when you hover over one of the 4 units the other 3 go down, and the block that should be the bottom appears on the bottom, but not the full width, I want to stretch it the full width. And you need to hover 4 units remained in their places. - Annabel47 commented on June 7th 19 at 14:58
June 7th 19 at 14:54
Solution
.showable-div {
 display: none;
}
.container:hover .showable-div {
 display: block;
}

Where .contaner - the one in which all 5 units, including one that should show .showable-div
I did so, but when I point the cursor on any of the 4-Oh of the blocks, the other moves down, and the unit that I want to show appears, but not the full width. - mabelle.Marvin commented on June 7th 19 at 14:57
It is a matter of Your layout, try to correctly mark up when not squeezed out display: none for the 5th block. - Annabel47 commented on June 7th 19 at 15:00
Thanks , I already figured out. - Annabel47 commented on June 7th 19 at 15:03

Find more questions by tags CSS