Question

所以我用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.

Answer 1

给它一个位置和动画而不是边距：

DEMO

  .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;
    }

Answer 2

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

<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>

Answer 3

这是更新的fiddle。在悬停时也适当设置底部填充/边距

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

Answer 4

只需调整底部边距即可：

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

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

悬停时改变边距会改变其下方的所有内容

4 个答案: