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

Question

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

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

带类的 div 具有.CCSS 属性display:none;

我想在 li hover 上显示隐藏的 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;
}

Answer 2

您可以使用 jQuery 和 CSS 来实现。

HTML 代码：

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

CSS 代码：

.hideDiv{display:none;}

jQuery代码：

$('li.Active').mouseover(function(){    
    $(this).find('div.C').removeClass('hideDiv');
});

$('li.Active').mouseout(function(){    
    $(this).find('div.C').addClass('hideDiv');
});