悬停图像滚动div（溢出：隐藏）

Question

我有一个div与溢出：汽车和一张桌子里面。 div根据需要创建垂直滚动条。不过，我想要为每行预览悬停状态。这意味着这个盘旋状态Div将不得不超越包含div的边界。我怎么会这样做溢出已经设置为隐藏我的内容... z-index不会让我逃避父母。

Answer 1

由于它是一个垂直滚动条，因此您可以设置为溢出-y：滚动而不是水平设置溢出。然后只要确保你的图像只留下水平边界（而不是垂直）。

接下来的时间，创建一个小提琴：http://jsfiddle.net/，我们可以帮你更快的:)

Answer 2

使用position:absolute;并设置z-index为您要溢出其容器的DIV可见值​​。

Answer 3

我最近解决了类似的问题，这应该帮助你：

https://stackoverflow.com/a/13383906/1063287

也看到相关的jsfiddle这里：

http://jsfiddle.net/rwone/eeaAr/

HTML

<div id="wrapper"> 
<div id ="hbar_one"></div> 
<div id="hbar_two"></div> 
<div id="container_a"> 
<div id="container_b"> 
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div"> 
<img src="http://lorempixel.com/g/50/50/"> 
<div class="hidden_db_data_div"> 
some amazing html 
</div> 
</div> 
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div"> 
<img src="http://lorempixel.com/g/50/50/"> 
<div class="hidden_db_data_div"> 
more amazing html 
</div> 
</div> 
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div"> 
<img src="http://lorempixel.com/g/50/50/"> 
<div class="hidden_db_data_div"> 
even more amazing html 
</div> 
</div> 
</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: 100px; 
overflow-y: auto; 
} 

.hidden_db_data_div { 
display: none; 
background: #00AFF0; 
width: 120px; 
height: 150px; 
color: red; 
position:absolute; 
overflow: hidden; 
z-index: 999; 
} 

img { 
width: 50px; 
height: 50px; 
} 

.magic { 
display: inline; 
} 

#container_a { position:relative; } 

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

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

脚本

$(".magic").hover(
function() { 
$(this) 
.find('.hidden_db_data_div') 
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'}) 
.fadeIn(200); 
}, 
function() { 
$(this) 
.find('.hidden_db_data_div') 
.fadeOut(100); 
}     
);