保证金变化会导致多个div受到影响

我希望自己的徽标图片向上移动而不影响其下方的措辞，但即使这些元素位于不同的div中，也会触发这两个元素，而这些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

来源

2013-04-08 Timothy Adams

@ user1479606我做了 – 2013-04-08 12:55:05

非常感谢:) – Eli 2013-04-08 13:10:47

您可以简单地将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

来源

2013-04-08 05:57:38 Eli

的文本，因为这两个项目都在流和移动首先会影响到第二的位置向上移动。

除了调整圆上的边距，应用position:relative;，然后调整top属性为负值以将其向上移动（无论所需的量如何）。

在相对定位的元素上调整顶部，底部，左侧或右侧属性会影响元素在屏幕上的绘制位置，而不影响其与流中邻居交互的位置。

来源

2013-04-08 05:39:57 Faust

其简单的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

这将做。

来源

2013-04-08 06:12:57 MarmiK

保证金变化会导致多个div受到影响

回答

相关问题