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

您可以使用.A:hover div.C { display:block; }

等选择器在纯CSS中实现它

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

Answer 2

你可以使用jQuery和CSS来完成它。

HTML code：

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

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

2 个答案: