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

小提琴：http://jsfiddle.net/2e07Lv9y/7/

Answer 2

当您悬停时，您正在添加边框5px。

您需要在不悬停时添加5px宽的边框，以便它们仅更改背景颜色。有点像：

li {
    list-style: none;
    display: inline-block;
    margin: 0 1%;
    border:5px solid  rgb(54, 129, 245);
}

<强> Updated DEMO

您可能需要调整li

的高度和位置

Answer 3

问题在于：hover li显示内联块，有更多宽度包括边框。如果您不会向下移动，则需要将.social width更改为50％以上或通过text-align：right放置元素。

Answer 4

添加

填充：5px;

正常李和

填充：0px;

到li：hover

热卖李：悬停不移动兄弟姐妹

4 个答案: