0

私は3つのレベルのリストを持っています。そのliのオプションボックスだけを表示したい。子のオプションも親のオプションボックスもありません。現在、私が木を歩いているとき、親はホバリングしたままです。これは理にかなっていますが、私が望んでいることではありません。どうすればよいですか？

http://jsfiddle.net/tGQUa/3/

HTML

<ul class="firstLevel">
<li>
    <label>Test 1</label>
    <div class="options">
        <a href="">Delete</a>
        <a href="">Add</a>
    </div>

    <ul class="secondLevel">
        <li>
            <label>Test 2</label>
            <div class="options">
                <a href="">Delete</a>
                <a href="">Add</a>
            </div>

            <ul class="thirdLevel">
                <li>
                    <label>Test 3</label>
                    <div class="options">
                        <a href="">Delete</a>
                        <a href="">Add</a>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</li>

</ p>

CSS

ul.secondLevel {margin-left:15px;}
ul.thirdLevel {margin-left:15px;}

ul.firstLevel li .options{
    display: none;
}
ul.firstLevel li:first-child:hover > .options{
    display: inline-block;
}
ul.secondLevel li .options{
   display: none;
}
ul.secondLevel li:first-child:hover > .options{
    display: inline-block;
}
ul.thirdLevel li .options{
    display: none;
}
ul.thirdLevel li:first-child:hover > .options{
    display: inline-block;
}

.options {
    display: inline;
    font-size: 10px;
    font-weight: normal;
}
4

1 に答える 1

1

「次の兄弟」+セレクターを試してみませんか？

.options { display: none }

.options:hover,
label:hover + .options { display: inline-block }

そして、いくつかの疑似要素のトリックと巧妙な配置により、純粋なCSSソリューションを実現できます。

http://jsfiddle.net/ryanwheale/tGQUa/10/

于 2012-12-29T04:40:15.750 に答える