我有一个带有 overflow:auto 的 div 和一个里面的表格。div 根据需要创建一个垂直滚动条。但是,我希望每一行都有一个预览悬停状态。这意味着这个悬停状态 div 必须超出包含 div 的边界。如果溢出已经设置为隐藏我的内容,我将如何做到这一点...... z-index 不会让我逃脱父级。
问问题
418 次
3 回答
0
我最近解决了一个类似的问题,这应该可以帮助你:
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);
}
);
于 2012-11-15T15:59:01.403 回答
0
使用position:absolute;
并将 设置z-index
为您希望溢出其容器的 div 的可见值。
于 2012-07-25T22:55:11.670 回答
0
既然是垂直滚动条,那么可以设置成overflow-y:scroll,不设置水平溢出。然后只需确保您的图像仅离开水平边界(而不是垂直边界)。
下一次,创建一个小提琴: http: //jsfiddle.net/ ,我们可以帮助你更快:)
于 2012-07-23T21:12:12.700 回答