Question

我有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>

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

Answer 1

您可以尝试“下一个兄弟”+选择器吗？

.options { display: none }

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

使用一些伪元素技巧和巧妙定位，您可以实现纯CSS解决方案：

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

CSS显示和隐藏孩子和父母

1 个答案: