修改

Question

所以基本上我将所有div元素（图标）浮动到左边并且边缘留下它们以创建空间在它们之间我将它们显示为内联。我现在遇到的问题是，每当我将鼠标悬停在一个元素（图标）上时，其余元素就会移动。请您解释一下导致这种情况的原因，非常感谢。我们很高兴收到例子。

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影响了展示位置。

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

很难在没有看到完整代码的情况下为您修改代码（您添加的部分只是一个代码段）并且还需要知道它的外观。

如果你能把它变成一个jsFiddle那么我可以尝试修复它，但最好自己去哪里弄错，然后自己修复它。

希望这一切都对你有意义。

Answer 2

您的元素最有可能通过鼠标悬停效果连接，从而更改每个元素周围的边框。将鼠标悬停在元素上将改变元素的尺寸。由于它们都是浮动的，因此它们将尽可能地移动以适应变化的元素。

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

2 个答案:

修改