相对定位：悬停

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.3 EM。

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