对李某的悬停效应-适用于所有这些。

Question

想不出一个好办法来表达我的问题。

这是有争议的设计

我希望这样，当你悬停在每个媒体上时，右上角的社交媒体横幅就会向下移动。我是用边距顶来做的，每个横幅都是一个列表项目。

当我悬停在其中一个图像，所有其他的也会下降！

我的问题是:如何才能使光标上的光标是唯一向下移动的？

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

提前感谢！

Answer 1

将vertical-align:top添加到li元素。这样可以确保元素正确地对齐，否则它将使用基线并产生您所看到的效果。