하나의 요소 위로 마우스를 가져 가면 div 요소가 이동하게됩니까?

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

, 가장 눈에 띄는이 font-을 증가시키기 위해 요소에 :hover 세트를 가진 당신의 CSS에있을 것입니다 요인이 될 수있다 크기 나 위치 나 크기에 영향을 줄 수있는 부분을 변경하거나 변경하십시오.

코드를 확인하고 문제가 있는지 확인해야합니다.

그래서 코드를보고 편집

, 나는 하나의 주요 결함을 볼 수 있습니다. :hover이 게재 위치에 영향을 미쳤을 것으로 추측했습니다.

글꼴 크기를 80px로 설정 한 다음 마우스를 올려 90px로 늘리십시오. 그러면 컨테이너가 있어야하는 크기가 커집니다. 요소에 최대 높이/너비를 설정하거나 오버플로를 숨김으로 설정하지 않으면 크기가 증가 할 무언가를 수정할 때 크기가 한 픽셀 씩 증가 할 때 항상 크기가 커집니다.

코드 전체를 보지 않고 코드를 수정하고 수정하기가 어렵습니다 (추가 한 부분은 코드 단편 일뿐입니다). 어떻게 보이는지 알 필요가 있습니다.

jsFiddle로 가져올 수 있다면 문제를 해결하려고 시도 할 수는 있지만 자신의 잘못을 배우고 스스로 해결하는 방법을 배우는 것이 가장 좋습니다.

희망 사항은 모두 당신에게 의미가 있습니다.

Answer 2

각 요소 주변의 테두리를 변경하는 마우스 오버 효과가있는 요소가 가장 많습니다. 요소 위에 마우스를 올리면 요소의 크기가 변경됩니다. 그들은 모두 떠 다니기 때문에 변경된 요소를 수용 할 수있는 최선의 방법으로 움직일 것입니다.