保證金變化會導致多個div受到影響

Question

我希望自己的徽標圖片向上移動而不影響其下方的措辭，但即使這些元素位於不同的div中，也會觸發這兩個元素，而這些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：

$('.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，然後動畫top屬性而不是margin-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;，然後調整top屬性爲負值以將其向上移動（無論所需的量如何）。

在相對定位的元素上調整頂部，底部，左側或右側屬性會影響元素在屏幕上的繪製位置，而不影響其與流中鄰居交互的位置。

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，也到了谷底，這將管理變化。

現在你.grey有是使它產生額外的保證金/填充過濾器，所以對於

我已經做到了這一點，以避免溢出.logo{ overflow:hidden}

的是副作用工作fiddle

這將做。