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;
}

我将元素设置为黄色以跟踪它，当然该元素应该是不可见的。

Answer 2

只要项目显示仅用于显示（即，我怀疑它可以被点击）并且可以作为触发事件的元素的子项放置，就不会有太多麻烦。

JS Fiddle demo

<强> HTML：

<div class='container'>
    <ul class='mylist1'>
        <li id='item1'>
            item1
            <div class='dynamic-content' style='background:blue;'>
                Some content.
            </div>
        </li>
        <li id='item2'>
            item2
            <div class='dynamic-content' style='background:green;'>
                Some content.
            </div>
        </li>
        <li id='item3'>
            item3
            <div class='dynamic-content' style='background:red;'>
                Some content.
            </div>
        </li>
        <li id='item4'>
            item4
            <div class='dynamic-content' style='background:orange;'>
                Some content.
            </div>
        </li>
    </ul>



    <ul class='mylist2'>
        <li>
            item1
        </li>
        <li>
            item2
        </li>
        <li>
            item3
        </li>
    </ul>

</div>

<强> CSS：

.container {width:500px;padding:5px;}
.mylist1{margin:0px 0px 5px 0px;}
.mylist1 li, .mylist2 li {display:inline-block;cursor:pointer;padding:3px;border:solid 1px black;}
.dynamic-content {display:none;left:55px; margin-top:10px;position:absolute;padding:5px;border:solid 2px grey;color:#dedede;font-weight:bold;}
#item1:hover > div.dynamic-content {display:block;}
#item1:hover {margin-bottom:40px;}
#item2:hover > div.dynamic-content {display:block;}
#item2:hover {margin-bottom:40px;}
#item3:hover > div.dynamic-content {display:block;}
#item3:hover {margin-bottom:40px;}
#item4:hover > div.dynamic-content {display:block;}
#item4:hover {margin-bottom:40px;}

Answer 3

CSS本质上不是一个功能性解决方案 - 没有充分的理由避免这个实现的javascript。

我通过将我的元素分成如下行来实现：

<div class="container">
    <div class="row">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="row">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    ...
</div>

查看完整实施： http://jsfiddle.net/n6Yz6/7/

在某些边缘案例中有点奇怪，但你应该能够从中得到这个想法。

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

修改

3 个答案:

updated fiddle