css 规则根据变量悬停另一个 div 时显示 div

Question

你好，我发现了一种有趣的方法，可以在悬停另一个 div 时使 div 可见。我一直在关注这个问题的公认答案中的这个例子:

question from stackoverflow并这样做:

example code

现在我在创建该 CSS 规则时遇到了问题。问题是我有这样的结构:

<div class="footer">
    <div id="content">
        <div id="list">
            <span class="up">some text</span>
            <ul class="nav">some content</ul>
                    <div class="flag">
                         <div id="<?php echo $variable;?>"></div>**---->here comes the variable that is neccessary for the css rule**
                         <div id="drop_down">the div that will displayed when hover flag</div>              
                    </div><!--flag -->
        </div><!--list -->
    </div><!--content -->
</div><!--Footer --> 

所以 css 规则的结构是这样的:

.footer #content #list .flag > #$variable+#drop_down {
    display: none;
}
.footer #content #list .flag > #$variable+#drop_down:first-child {
    display: block;
}

.footer #content #list .flag:hover > #$variable+#drop_down {
    display: block;
}

所以当 $variable 将是 a 时，例如 html 将是:

<div class="flag">
    <div id="a"></div>
    div id="drop_down">some content</div>               
</div><!--flag -->

和 css 规则:

.footer #content #list .flag > #a+#drop_down...
.footer #content #list .flag > #a+#drop_down:first-child...
.footer #content #list .flag:hover > #a+#drop_down...

但是如果 $variable 不等于 a 例如 b 怎么办？

我尝试了不同的方式，例如:

.footer #content #list .flag > #a,#b+#drop_down...
.footer #content #list .flag > #a,#b+#drop_down:first-child...
.footer #content #list .flag:hover > #a,#b+#drop_down...

或

.footer #content #list .flag > #a+#b+#drop_down...
.footer #content #list .flag > #a+#b+#drop_down:first-child...
.footer #content #list .flag:hover > #a+#b+#drop_down...

或

.footer #content #list .flag > #a+#drop_down,
.footer #content #list .flag > #b+#drop_down,
...
.footer #content #list .flag > #a+#drop_down:first-child,
.footer #content #list .flag > #b+#drop_down:first-child,
...
.footer #content #list .flag:hover > #a+#drop_down,
.footer #content #list .flag:hover > #b+#drop_down...

但这些都没有用。

因此，如果有人可以告诉我如何获取它，我将不胜感激。

非常感谢。

Answer 1

如果 <div>使用变量 class总是第一个child的 .flag你可以使用伪元素选择器 :first-child .

.footer #content #list .flag > div:first-child+#drop_down

就像您为 #drop_down 所做的一样分区