html - 对 li 的悬停效果 - 适用于所有这些

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元素。这可以确保元素正确对齐，否则它会使用基线并产生您看到的效果。