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始終是.flag您可以使用pseudeo元素選擇:first-child第一child。

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

就像你對#drop_down div做的那樣。