html - 使 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;
}