Flexboxes重叠而不是推开？ [英] Flexboxes overlapping instead of pushing aside?

问题描述

如果您将鼠标悬停在绿色框中：

If you hover the green box at:

http://jsfiddle.net/frank_o/YS5QN/3/

它会展开并挤出蓝色框。是否有办法使它与蓝色框重叠，因此蓝色框保持不变？

It will expand and squeeze out the blue box. Is there a way to make it overlap the blue box instead, so the blue box remains in place?

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
});

推荐答案

我认为你误用 display：flex 。

也许可以尝试使用 width：calc（）绝对;

I think you are mis-using display:flex.
Maybe try using width:calc() and position:absolute;

尝试此操作：

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

Also, I wanted to show you how you can animate that box without using 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%;
}

这篇关于Flexboxes重叠而不是推开？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！