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

Question

我有一个 ul 列表，每个 li 都是这样构造的:

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

其中类 .C 的 div 具有 CSS 属性 display:none;

我想在 li 悬停时显示隐藏的 div，但我希望它只显示在事件的 li 元素上。因此，当我将鼠标悬停在 li 项上时，它只会显示该列表项隐藏的 div。

Answer 1

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

jsFiddle here.

---

示例代码:

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