Html 热使李：悬停不动

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

我的想法是在父项上使用

position:absolute

，在li或图像上使用

position:relative

，但其他列表项/图像仍受到影响

jsFiddle:

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>

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

---

我缺少什么？

当您悬停时，您正在添加一个宽度为5px的边框

不悬停时，您需要添加5px宽的边框，以便它们仅更改背景颜色。大致如下：

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

---

您可能需要调整

li

的高度和位置，以便在悬停时添加宽度为

5px

的边框

不悬停时，您需要添加5px宽的边框，以便它们仅更改背景颜色。大致如下：

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

---

您可能需要调整

li

的高度和位置。您可以使用

轮廓

而不是

边框

。大纲链接的行为类似于边框，但它不是元素维度的一部分。 见：

---

小提琴：

你可以用

轮廓

代替

边框

。大纲链接的行为类似于边框，但它不是元素维度的一部分。 见：

---

小提琴：

问题在于：悬停显示内联块的li，包括边框在内的宽度更大。如果你不想下移，你需要改变。社会宽度超过50%，或者通过文本对齐放置元素：对

问题在于：悬停显示内联块的li，包括边框在内的宽度更大。如果你不想下移，你需要改变。社会宽度超过50%，或者通过文本对齐放置元素：对

添加

填充物：5px

正常的李 及

填充：0px

到li：悬停

添加

填充物：5px

正常的李 及

填充：0px

---

对于li：悬停

您可以只在li的5px上添加一个填充，也可以在其中添加5px边距。您可以只在li的5px上添加一个填充，也可以在其中添加5px边距。将相关代码添加到您的答案中也是一个很好的做法。很好地使用了

outline

在答案中添加相关代码也是一种很好的做法。很好地使用了

outline