html - 如何将样式应用于列表中的相邻元素

Question

我可以只使用 CSS 来完成这个场景吗？

我有一个任意长度的元素的无序列表，这些元素分布在一个由四个元素组成的网格中

**** **** **** ****
*  * *  * *  * *  *
**** **** **** ****

**** **** ****
*  * *  * *  *
**** **** ****

当用户将鼠标悬停在一个元素上时，一些额外的内容将下拉到该元素下方并将其下方的行向下推。

**** **** ---- ****
*  * *  * |^ | *  *
**** **** ---- ****
-------------------
| Content is here |
-------------------
**** **** ****
*  * *  * *  *
**** **** ****

主要是下拉菜单需要在宽度方向上填满父容器。我使用 position: absolute 完成了此操作并拥有 <ul>元素是 position: relative .

我在想也许有一个 nth-child可能会从本质上为邻居设置底部边距并将较低的元素向下推，但我不确定如何完成此操作。

如果可能的话，我尽量避免使用 Javascript 来做这件事。

编辑

这是我目前所获得的一些信息:http://jsfiddle.net/pYw34/

Answer 1

希望这就是你想要的。

updated fiddle

然而，这不是一个简单的规则:

.about__list__item:nth-child(4n):hover:after,
.about__list__item:hover + .about__list__item:nth-child(4n):after,
.about__list__item:hover + .about__list__item + .about__list__item:nth-child(4n):after,
.about__list__item:hover + .about__list__item + .about__list__item + .about__list__item:nth-child(4n):after
{
    content: '';
    float: left;
    display: block;
    width: 100px;
    height: 90px;
    background-color: yellow;
} 

我把元素做成黄色来跟踪它，当然那个元素应该是不可见的。