html - CSS 显示和隐藏孩子和父母

Question

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

Answer 1

你能试试“下一个兄弟”+选择器吗？

.options { display: none }

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

并且通过一些伪元素技巧和巧妙的定位，您可以实现纯 CSS 解决方案：

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