0

こんにちは、別の div をホバーしながら div を表示する興味深い方法を見つけました。私はこの質問の受け入れられた答えからこの例に従っています:

スタックオーバーフローからの質問で、それは好きでした:

サンプルコード

その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;
}

たとえば、htmlは次のようになります$variable。a

<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 に答える