Что делать с псевдоклассом hover?

Question

[HellBlade]

У меня есть один блок. Внутри этого блока есть ещё 4 блока одинаковой ширины и высоты. Как правильно сделать, чтобы при наведении на каждый из 4-ох блоков появлялся ещё один блок снизу и при этом 4 верхних блока оставались на своих местах, а новый блок появлялся прямо под ними.

Comments

[Андрей]

На чистом CSS это очень сложно. Проще на js это сделать.

[HellBlade]

Андрей, спасибо за ответ

Answer 1

[hellcaster]

Добавляются стиль к элементу при наведении

Comments

[hellcaster]

Например
а:hover {
text-decoration:none;
}

[HellBlade]

Victor Muryn, Я так и делал, но при наведении на один из 4 блоков остальные 3 уходят вниз, а тот блок что должен быть снизу появляется снизу, но не на всю ширину, я хочу чтобы он растягивался на всю ширину. И нужно чтобы при наведении 4 блока оставались на своих местах.

Answer 2

[Владимир Скибин]

.showable-div {
  display: none;
}
.container:hover .showable-div {
  display: block;
}

Где .contaner - тот в котором находятся все 5 блоков, включая тот, который надо показать .showable-div

Comments

[HellBlade]

Я так делал, но когда я навожу курсор на какой то из 4-ох блоков, то остальные перемещаются вниз, а тот блок который я хочу показать появляется, но не на всю ширину.

[Владимир Скибин]

HellBlade, Это уже дело Вашей верстки, попробуйте правильно сверстать, когда не выдавлен display: none для 5-го блока.

[HellBlade]

Владимир Скибин, Спасибо, я уже разобрался.