改变悬停的边距会移动它下面的所有东西

Changing margin on hover shifts all the things beneath it

本文关键字：移动 悬停 改变      更新时间：2023-09-26

所以我用CSS创建了一个简单的动画，当我将鼠标悬停在图像上时，图像的边距会减小，从而产生上升效果，但问题是当我改变边距时，它下面的所有东西也会移动。我怎么能只移动图像而不移动整体呢?

CSS: 

.down_arrow {   
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.down_arrow:hover {
    margin-top: 2px;
}
HTML: 

<div class="row text-center" style="margin-top: 30px;">
    <img src="img/down_arrow.png" class="down_arrow" onclick="goToByScroll('ideas_section');" />
</div>
jSFiddle.

给它一个位置，并将其动画化，而不是margin:

演示
  .down_arrow {   
        margin: 15px;
        top:0;
        position:relative;
        -webkit-transition: top 0.5s ease-out;
        -moz-transition: top 0.5s ease-out;
        -o-transition: top 0.5s ease-out;
    }
    .down_arrow:hover {
        top: -12px;
    }

在img周围添加一个固定高度的audiv。

<div class="row text-center" style="margin-top: 30px; height: 100px;">
    <img src="img/down_arrow.png" class="down_arrow" onclick="goToByScroll('ideas_section');" />
</div>

这是更新后的fiddle。适当地设置底部padding/margin

http://jsfiddle.net/fQpBV/6/

只需调整下距即可:

http://jsfiddle.net/fQpBV/12/

.down_arrow:hover {
    margin-top: 2px;
    margin-bottom: 28px;
}
相关文章：