여백 변경으로 인해 여러 div가 영향을받습니다

Question

내 로고 이미지가 그 아래의 문구에 영향을 미치지 않고 위로 움직이기를 원하지만, 다른 div에 있어도 상위 div에 싸여 있어도 두 요소가 모두 트리거됩니다. 나는 그것을 얻지 않는다. 나는 마진과 관련이 있다고 가정하고 있지만 텍스트 요소의 반대 값을 역으로 설정하려고하면 이상하게 작동합니다.

A Fiddle

CSS :

.full-circle { 
display:block; 
margin:auto; 
margin-top: 15px; 
overflow: hidden; 
height: 180px; 
width: 180px; 
border: 2px solid #FFF; 
-moz-border-radius: 90px; 
-webkit-border-radius: 90px; 
background:#FDF5E6; 
-webkit-transition: margin 0.2s ease-out; 
-moz-transition: margin 0.2s ease-out; 
-o-transition: margin 0.2s ease-out; 
} 

.full-circle:hover{margin-top: 2px;} 

jQuery를 : 두 항목 흐름에, 제 1 이동하여 제 위치에 영향을 미칠 것이기 때문에

$('.full-circle').hover(
      function(){ 
       $(this).stop().animate(
        {marginTop: '2'}, 20, 'linear' 
       );//end animate 
      },//end function 
      function(){ 
       $(this).stop().animate(
       {marginTop: '15'}, 20, 'linear' 
       );//end animate 
      }//end function 
     );//end hover 

Answer 1

position: relative을 .full-circle에 간단히 추가 한 다음 margin-top 대신 top 속성에 애니메이션을 적용하면됩니다.

$('.full-circle').hover(
    function(){ 
     $(this).stop().animate(
      {top: '-10'}, 20, 'linear' 
     );//end animate 
    },//end function 
function(){ 
    $(this).stop().animate(
     {top: '15'}, 20, 'linear' 
     );//end animate 
    }//end function 
);//end hover 

Working Demo

Answer 2

텍스트가 이동 .

원의 여백을 조정하는 대신 position:relative;을 적용한 다음 상단 속성을 음수 값으로 조정하여 (원하는 값만큼) 위로 이동합니다.

상대적으로 배치 된 요소의 위쪽, 아래쪽, 왼쪽 또는 오른쪽 속성을 조정하면 흐름에서 이웃과 상호 작용하는 방식에 영향을주지 않고 요소가 화면에 그려지는 위치에 영향을줍니다.

Answer 3

CSS

.full-circle{margin-top:15px; margin-bottom:15px} 

.full-circle:hover{margin-top:2px; margin-bottom:28px} 

.logo{overflow:hidden;} 

이것은 또한 당신이 할 수있는 jQuery를 사용하여, JQuery와없이 할 것와의 단순 단지도 바닥에 margintop에 변경 사항을 적용, 그 변화를 관리 할 것입니다. 그

을 위해 내가 fiddle

이 의지 작업 오버 플로우 .logo{ overflow:hidden}

의 부작용을 방지하기 위해 이런 짓을했는지, 그래서 지금

당신의 .grey, 그것은 여분의 여백/패딩을 작성하고있다 필터가 해야 할 것.