html - 热制作 li :hover Not Move Siblings

Question

我试图在悬停时放大我的列表项边框，但当我这样做时，它会将其他图标向下移动。

我的想法是在父级上使用 position: absolute ，在 li 或图像上使用 position: relative ，但其他列表项/图像仍然受到影响.

jsFiddle: http://jsfiddle.net/2e07Lv9y/2/

HTML:

<div class="container">
    <ul class="social">
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
    </ul>
</div>

CSS:

.container {
    background-color: rgb(54, 129, 245);
    height: 75px;
}

.social {
    width: 50%;
    margin: 3%;
    position: absolute;
    right: 0;
}

li {
    list-style: none;
    display: inline-block;
    margin: 0 1%;
}

img {
    border: 2px white solid;
}

li:hover {
    cursor: pointer;
    border: 5px white solid;
    position: relative;
}

我错过了什么？

Answer 1

您可以使用outline 而不是border。 Outlinke 的行为类似于 border，但它不是元素尺寸的一部分。 参见:http://www.w3schools.com/css/css_outline.asp

li:hover {
    cursor: pointer;
    outline: 5px white solid;
    position: relative;
}

fiddle :http://jsfiddle.net/2e07Lv9y/7/