因此,基本上,我将所有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>
最佳答案
可能有很多因素,最明显的是在CSS
的元素上设置了:hover
来增加字体大小或更改会影响其位置或大小的内容。
我们将需要查看代码来确定并验证问题所在。
编辑
因此,查看您的代码,我可以看到一个主要缺陷。正如我猜想的那样,:hover
正在影响位置。
您将字体大小设置为80px,然后在悬停时将其放大为90px。这将增加容器所需的尺寸。除非您在元素上设置最大高度/宽度或将溢出设置为隐藏,否则当您修改会增大大小的内容时,大小总是会增加,即使单个像素也是如此。
很难在没有看到完整代码的情况下尝试为您修改代码(您添加的片段只是一个片段),并且还需要知道它的外观。
如果您可以将其放入jsFiddle中,那么我可以尝试对其进行修复,但最好是了解一下自己出了什么问题,然后自己修复。
希望这一切对您有意义。