Question

在悬停时，我使用top值-0.3em进行相对定位。我希望div向上移动，第二div向上移动。但我发现divs之间存在白色差距。为什么会这样，我该如何解决？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

试试这个

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

Answer 2

使用.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.3 em。

相对定位：悬停

2 个答案: