0

你好,我发现了一种有趣的方法,可以在悬停另一个 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不相等的情况是什么?ab

我尝试了不同的方法,例如:

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

但这些都没有奏效。

所以如果有人可以告诉我如何获取这个我真的很感激。

多谢。

4

1 回答 1

1

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

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

就像你对#drop_downdiv 所做的那样。

于 2013-03-07T07:45:24.213 回答