javascript - 将鼠标悬停在一个元素上时，是什么导致 div 元素移动？

Question

所以基本上我将所有 div 元素(图标) float 到左侧，并在它们之间留出边距以在它们之间创建空间，然后将它们内联显示。我现在遇到的问题是，每当我将鼠标悬停在一个元素(图标)上时，其余元素都会移动。请问是什么原因造成的，非常感谢。示例将不胜感激。

CSS:

    .facebookIc{
    font-size: 80px;
    margin-left: 120px;

    -webkit-transition: font-size 0.3s linear;
    }

    i.icon-facebook-circled:hover{
        color: #3b5998;
        font-size: 90px;
        -moz-transition: all 0.3s ease-in;
        /* WebKit */
        -webkit-transition: all 0.3s ease-in;
        /* Opera */
        -o-transition: all 0.3s ease-in;
        /* Standard */
        transition: all 0.3s ease-in;


    }


    .twitterIc{

    font-size: 80px;
    margin-left: 120px;
    -webkit-transition: font-size 0.3s linear;
    }

    i.icon-twitter-circled:hover {
       font-size: 90px;
        color: #00aced;
        -moz-transition: all 0.3s ease-in;
        /* WebKit */
        -webkit-transition: all 0.3s ease-in;
        /* Opera */
        -o-transition: all 0.3s ease-in;
        /* Standard */
        transition: all 0.3s ease-in;
    }

.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}

html:

<section  id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>

Answer 1

可能有很多因素，最明显的是你的 CSS 在元素上设置了 :hover 来增加字体大小或改变一些东西这会影响它的位置或大小。

我们需要查看代码以确定并验证问题所在。

编辑

所以通过您的代码，我可以看到一个主要缺陷。正如我猜测的那样，:hover 影响了位置。

您将字体大小设置为 80 像素，然后在悬停时将其设置为 90 像素。这将增加容器所需的大小。除非您在元素上设置最大高度/宽度或将溢出设置为隐藏，否则当您修改会增加尺寸的内容时，它总是会增加尺寸，即使是单个像素。

在没有看到完整代码(您添加的只是一个片段)并且还需要知道它的外观的情况下，很难尝试为您修改代码。

如果你能把它放到 jsFiddle 中，那么我可以尝试修复它，但最好自己了解你哪里出了问题，然后如何自己修复它。

希望这一切对你有意义。