4

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

我有一个任意长度的元素的无序列表，它们排列成一个由四个元素组成的网格

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

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

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

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

主要的是下拉菜单需要按宽度填充父容器。我已经使用元素 be 完成了position: absolute这项<ul>工作position: relative。

我在想，也许有一个nth-child可能的东西基本上可以为邻居设置底部边距并将较低的元素向下推，但我不确定如何实现这一点。

如果可能的话，我试图避免在 Javascript 中这样做。

编辑

这是我到目前为止所得到的一个小提琴：http: //jsfiddle.net/pYw34/

4

3 回答 3

1

我希望这是你想要的。

更新的小提琴

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

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

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

于 2013-09-12T18:12:51.860 回答
0

只要项目显示只是为了显示（即，我怀疑它可以是可点击的）并且可以作为触发事件的元素的子元素放置，您就不应该遇到太多麻烦。

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;}
于 2013-09-12T16:15:19.457 回答
0

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/

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

于 2013-09-12T17:44:08.633 回答