你好,我发现了一种有趣的方法,可以在悬停另一个 div 时使 div 可见。我一直在从这个问题的公认答案中关注这个例子:
来自stackoverflow的问题并这样做:
现在我在创建该 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...
但这些都没有奏效。
所以如果有人可以告诉我如何获取这个我真的很感激。
多谢。