css - 如何强制悬停状态 div 显示在其他元素上方和容器外部？

Question

我已经研究这个问题大约两天了。

示例

这是一个相当复杂的设计，因此为了减少此处粘贴的代码，我在这个 jsfiddle 上重新创建了主要结构，并在本文末尾包含了简化的代码:

http://jsfiddle.net/rwone/zwxpG/10/

场景

我有一个容器，里面有很多 <li>包含一个 div(包含来自数据库的动态内容)，该 div 最初具有属性 display: none。

将鼠标悬停在这些 <li> 中的图像上但是，我希望显示 div。

它正在工作，但是 div 似乎位于容器中其他元素的下方，该容器具有固定高度和 Overflow-y: auto。

我尝试过的

我已经尝试过 z-index 以及绝对和相对定位的组合，但我还没有找到解决方案。

我在下面的代码和 jsfiddle 中隔离了两个原因(显示为 /* comments */ )，但这些在实时测试站点上不起作用。

问题

因此，我的问题是，是否有另一种方法可以强制将悬停状态 div 显示在封闭它的容器的顶部和外部？

这不是一个理想的解决方案，我可以在 jsfiddle 中解决这些问题，但不能在实时网站中解决这些问题，但我只是想问是否有另一种方法可以完全解决这个问题？

谢谢。

html

<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div  id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>

CSS

#wrapper {
 width: 300px;   
}
#hbar_one {
 background: #cc0000;   
 height: 50px;
}

#hbar_two {
 background: #ffcc00;   
 height: 50px;
}

#container_b {
    height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
    overflow-y: auto;
}

ul li {
    display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
    position: relative;   
}

#container_c {
    display: none;
}

ul li:hover #container_c {
 background: #00AFF0;
 display: block;
 width: 200px;
 height: 200px;
 position:absolute;
 top: -20px;
 left: 50px; 
 z-index: 999;  
overflow: hidden;    
}

#hbar_three {
 background: #cccccc;   
 height: 50px;
}

#hbar_four {
 background: #000000;   
 height: 50px;
}

更新

为了回应下面的答案，这里是有关悬停时显示的实际内容的更多信息(#container_c div 内的所有内容)。每个<li>有自己独特的内容:

​<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>

Answer 1

您只想一次显示这些悬停元素之一？

将单个 DIV 放在主体之外并使其隐藏。

然后，每次将鼠标悬停在 LI 上时，使用 JavaScript 来调整其位置和内容。

无需为每个 LI 提供自己的 DIV。

将内容存储在数据属性内

<li id=something data-some-content="Hello joe">

然后你可以像这样使用 jQuery 检索它

$("#something").data('some-content')