如何在列表中显示隐藏的div

Question

我有一个ul列表,每个li构造如下:

<li class="A">list-item
  <div>1</div>
  <div class="B">2
     <div class="C">3</div>
  </div>
</li>

其中div与class .C具有CSS属性display:none;

我想在li悬停时显示隐藏的div,但我希望它仅显示在活动的li项目上.所以当我悬停li项目时,它只显示隐藏div的列表项.

Answer 1

您可以使用诸如的选择器在纯CSS中实现它 .A:hover div.C { display:block; }

jsFiddle在这里.

示例代码:

HTML:

<li class="A">list-item
  <div>1</div>
  <div class="B">2
     <div class="C">3</div>
  </div>   
</li>

<li class="A">list-item
  <div>1</div>
  <div class="B">2
     <div class="C">3</div>
  </div>    
</li>

CSS:

div.C {
    display:none;
}

.A:hover div.C {
    display:block;
}