悬停在li上的效果 - 适用于所有这些效果

Question

无法想出一个说出问题的好方法。

Here is the design in question

我想要它，以便当您将鼠标悬停在每个横幅上时，右上方的社交媒体横幅会向下移动。我使用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; }

提前致谢！

Answer 1

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