使2个子元素占用相同的空间而不会使父级折叠

Question

嗯，我想标题解释了我的目标，是否可能？

我想要这个，所以我可以添加以下CSS ..

.bawrap:hover > .after {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s; }

.bawrap:hover > .before {
    opacity: 100;
    filter: alpha(opacity=100);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s;
}

制作动画前后图像。

Answer 1

为此您需要使用属性nth-child，例如：

.bawrap:nth-child(1):hover: > .after {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s; }

.bawrap:nth-child(2):hover > .before {
    opacity: 100;
    filter: alpha(opacity=100);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s;
}