如何将样式应用到列表中的相邻元素 [英] How to apply styles to neighboring elements in a list

问题描述

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

Can I accomplish this scenario using only CSS?

我有一个无序的任意长度的元素列表， >

I have an unordered list of elements of arbitrary length that lay out into a grid of four elements across

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

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

当用户将鼠标悬停在

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

主要的是下拉需要填充父容器的宽度。我使用 position：absolute 并且< ul> 元素位置：相对。

The main thing is that the dropdown needs to fill up the parent container width-wise. I've done this using position: absolute and having the <ul> element be position: relative.

我想到的可能是 nth-child 可能基本上为邻居设置底部边距，并推低下部元素，但我不知道如何完成此。

I was thinking that maybe something with an nth-child might work to essentially set the bottom margin for the neighbors and push the lower elements down, but I'm not sure how to accomplish this.

我试图避免。

这里有一个小东西far： http://jsfiddle.net/pYw34/

Here's a fiddle of what I've got so far: http://jsfiddle.net/pYw34/

推荐答案

我希望这是你想要的。

I hope this is what you want.

但不是一个简单的规则：

Not an easy rule, however:

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

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

I made the element yellow to track it, of course that element should be invisible.

这篇关于如何将样式应用到列表中的相邻元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！