Question

如果您将绿框悬停在：

它会扩展并挤出蓝框。有没有办法让它与蓝框重叠，所以蓝框仍然存在？

HTML：

<div class="container">
    <div class="column_1"></div>
    <div class="column_2"></div>
</div>

CSS：

.container {
    display: flex;
}
.column_1 {
    flex: 1;
    height: 60px;
    background: blue;
}
.column_2 {
    width: 120px;
    height: 30px;
    background: green;
}

jQuery的：

$('.column_2').hoverIntent({
    over: function () {
        $(this).animate({
            width: '100%'
        }, 500);
    },
    out: function () {
        $(this).animate({
            width: '120px'
        }, 500);
    },
    timeout: 300
});

Answer 1

我认为你误用display:flex 也许可以尝试使用width:calc()和position:absolute;

试试这个：

demo

另外，我想向您展示如何在不使用jQuery的情况下为该框添加动画

.column_2 {
    position: absolute;
    right: 0;
    width: 120px;
    height: 30px;
    background: green;

    -webkit-transition: 500ms width;
    -moz-transition: 500ms width;
    -ms-transition: 500ms width;
    -o-transition: 500ms width;
    transition: 500ms width;
}

.column_2:hover {
    width: 100%;
}

Flexbox重叠而不是推开？

1 个答案:

demo

demo