边距变化导致多个 div 受到影响答案

【问题标题】：Margin change causes multiple divs to be affected边距变化导致多个 div 受到影响
【发布时间】：2013-03-30 02:34:59
【问题描述】：

我希望我的徽标图像向上移动而不影响其下方的措辞，但即使它们位于不同的 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

【问题讨论】：

标签： jquery html css margin

【解决方案1】：

文本向上移动是因为两个项目都在流中，移动第一个会影响第二个的位置。

不要调整圆圈的边距，而是应用 position:relative;，然后将 top 属性调整为负值以将其向上移动 top:-20px;（任意数量）。

调整相对定位元素的 top、bottom、left 或 right 属性会影响元素在屏幕上的绘制位置，而不会影响它与流中相邻元素的交互方式。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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

这样就可以了。

【讨论】：