使兄弟元素固定不管頂部的位置

Question

這是我遇到的代碼。

HTML

<a href="">abc</a> 
<p>text</p> 

CSS

a { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    background: red; 
} 
a:hover { 
    height: 90px; 
} 

我有2個元件，我想使固定不論第一個的高度的第二元件的位置。在上面的小提琴的高度變化的「懸停」，然後我看到第二個元素抽搐。

使用位置固定和絕對不適用於我的情況。

有什麼想法？

Answer 1

您可以使用padding-top作爲段落。該值是正常和懸停狀態下的高度差。我用+兄弟選擇器來選擇下一個元素。

a { 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
a:hover { 
 
    height: 90px; 
 
} 
 
a:hover + p { 
 
    padding-top: 10px; /* Value(Difference between heights) */ 
 
}

<a href="">abc</a> 
 
<p>text</p>