我有一种情况,当'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;
}

10-05 20:26
查看更多