[英]Scrollable div (overflow:hidden) with hover images
我有一個div具有overflow:auto和一個表。 div根據需要創建一個垂直滾動條。 但是,我希望每行都有一個預覽懸停狀態。 這意味着該懸停狀態Div必須超出包含div的邊界。 我將如何使用已設置為隱藏我的內容的溢出來執行此操作... z-index不會讓我脫離父級。
由於它是垂直滾動條,因此可以將其設置為overflow-y:scroll,而不必將其水平設置。 然后只需確保您的圖像僅離開水平邊界(而不是垂直邊界)即可。
下次,創建一個小提琴: http : //jsfiddle.net/ ,我們可以幫助您更快:)
使用position:absolute;
並將您要溢出其容器的div的z-index
設置為可見值。
我最近解決了類似的問題,這應該可以幫助您:
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);
}
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.