CSS显示和隐藏孩子和父母

我有3个级别的列表。我只想要那个li的选项框来显示。不是任何孩子的选择，也不是任何父母的选项框。目前，当我沿着树走路时，家长保持徘徊，这是有道理的，但不是我想要的。我该怎么做呢？CSS显示和隐藏孩子和父母

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

来源

2012-12-28 Boone

你能否尝试 “下一个兄弟” +选择？

.options { display: none } 

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

并与一些伪元素弄虚作假和巧妙的定位，可以实现纯CSS解决方案：

来源

2012-12-29 04:40:15

这是真棒。我从来不知道css中的+号。这实际上就是我所需要的，并简化了您的解决方案，试图弄清楚它是如何工作的。 http://jsfiddle.net/tGQUa/12/谢谢 – Boone

@Boone - 很酷，想接受答案，如果它有助于解决您的问题:) –

CSS显示和隐藏孩子和父母

回答

相关问题