對li的懸停效果 - 適用於所有人

我想它，以便在頂部的社交媒體橫幅右側向下移動，當你將鼠標懸停在他們中的每一個。我使用margin-top來做到這一點，每個橫幅都是一個列表項目。

當我將鼠標懸停在其中一張圖像上時，其他所有圖像也都下降了！

我的問題是：我該如何做到這一點，光標所在的是唯一向下移動的那個？

HTML：

<ul id="social-media"> 
     <li><a href="#"><img></a></li> 
     <li><a href="#"><img></a></li> 
     <li><a href="#"><img></a></li> 
</ul>

CSS：

#social-media { 
    float: right; 
    margin: 0px; 
    margin-left: 80%; 
    position: absolute; 
} 

#social-media li { display: inline-block; margin-top: -15px; } 
#social-media li:hover { margin-top: 0; }

提前感謝！

來源

2013-09-10 Tara

將vertical-align:top添加到li元素。這可確保元素正確對齊，否則會使用基線併產生您看到的效果。

來源

2013-09-10 21:23:20

工作正常！我用這樣一個簡單的答案來問一個問題感到很傻。你會介意更深入地解釋這有何幫助嗎？你的意思是它把頂部向下而不是底部向下？ – Tara

默認情況下，「inline-block」元素將與其內容的基線對齊。如果您將其中一個移動到其他位置，其他人將會跟隨基線。設置「vertical-align：top」會強制元素根據包裝盒本身進行對齊，而不是其內容。 –

哦！這就說得通了。非常感謝您的幫助！ – Tara

對li的懸停效果 - 適用於所有人

回答

相關問題