相对定位:悬停

Question

在悬停时，我使用top值-0.3em的相对定位。我预计div会向上移动，第二个div也会向上移动。但是我在两个divs之间有白色的差距。为什么会发生这种情况，我如何解决这个问题？

​

.one {
    width: 3em;
    line-height: 3em;
    background: yellow;

}

.two {
    width: 3em;
    line-height: 3em;
    background: red;
}

.one:hover {
    line-height: 3.3em;
    position: relative;
    top: -0.3em;
}

<div class="one">one</div>
<div class="two">two</div>

​

Answer 1

在.one上使用负边距代替：

​

.one {
    width: 3em;
    line-height: 3em;
    background: yellow;

}

.two {
    width: 3em;
    line-height: 3em;
    background: red;
}

.one:hover {
    margin-top: -0.3em;
}

<div class="one">one</div>
<div class="two">two</div>

​

由于相对定位不会改变元素在文档流中的位置，所以使用top: -0.3em不会导致.two向上移动0.3em。

Answer 2

尝尝这个

<div class="zero">
    <div class="one">one</div>
    <div class="two">two</div>
</div>

CSS

.one {
    width: 3em;
    line-height: 3em;
    background: yellow;
}
.two {
    width: 3em;
    line-height: 3em;
    background: red;
}
.zero{
    width: 3em;
    line-height: 3em;
}
.zero:hover {
    line-height: 3.3em;
    position: relative;
    top: -0.3em;
}