懸停圖像滾動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); 
}     
);