我有一种情况,当'foo'元素悬停时,'bar'div显示一些有关'foo'元素的信息。但是滚动条与此冲突,并隐藏了我的div的其余部分。我能以某种方式显示完整的“ bar” div吗?
的HTML
<div class="box">
<div class="foo">
xxx
<div class="bar">Info text, info text</div>
</div>
</div>
的CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
position: relative;
}
.bar {
float: left;
height: 20px;
width: 125px;
background: orange;
position: relative;
top: -10px;
right: -30px;
display: none;
}
.foo:hover > .bar {
display: block;
}
最佳答案
您可以将.bar
div设置为position:fixed
JSfiddle Demo
的CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
}
.bar {
height: 20px;
width: 125px;
background: orange;
position: fixed;
display: none;
}
.foo:hover > .bar {
display: block;
}