Question

我有一种情况，当'foo'元素悬停时，'bar'div显示有关'foo'元素的一些信息。但滚动条与此冲突，并隐藏我的其余部分。我可以让它以某种方式显示完整的“酒吧”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;
}

Answer 1

您可以将.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;
}

我可以获得重叠滚动条的内容吗？ CSS

1 个答案: