Question

当<div>悬停在<div>上时，我正在尝试使用CSS3过渡使此<h3>内的图像向上移动10个像素。它在Firefox中运行良好，但是当我在Chrome和Safari中查看它时，<p>和.feature-table #box { width: 325px; height: 372px; margin-right: 20px; float: left; } .feature-table a { display: block; width: 325px; height: 372px; } .feature-table a img { display: block; margin-left: auto; margin-right: auto; padding-top: 54px; padding-bottom: 40px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .feature-table a: hover img { padding-top: 44px; padding-bottom: 50px; } .feature-table a h3 { font-family: 'GothamBold', sans-serif; font-size: 30px; color: #3d3d3d; text-align: center; text-decoration: none; margin: 0; padding: 0 25px; } .feature-table a: hover h3 { color: #f6ce4f; } .feature-table a { text-decoration: none; } .feature-table p { font-family: 'GothamLight', sans-serif; font-size: 14.5px; color: #949494; text-align: center; padding: 10px 28px; } .feature-table .caret { border-top: 5px solid #fff; border-bottom: 5px solid #fff; border-left: 5px solid #ffc235; content: ""; display: inline-block; height: 0; width: 0; margin-left: 10px; }元素会稍微抖动一下。

这是我的CSS：

<div id="box">
    <a href="#">
        <img src="images/payment_icon.png" width="114" height="115" border="0" />
        <h3>Customizable Campaign Pages</h3>
        <p>Tell your story with images, video, rich text and social updates<b class="caret"></b></p>
    </a>
</div>

这是我的HTML的一部分：

{{1}}

有什么想法吗？

Answer 1

这可能是一个性能问题，因为您为2个影响当前布局的不同属性设置了动画理想的解决方案是使用不影响其他元素的某个道具。在您的情况下，在将图片的位置设置为top之后，可以使用relative属性完成此操作：

a img{
    position : relative;
    top : 0;
}
a:hover img{
    top : -4px;
}

这是一个有效的演示：http://jsfiddle.net/p7Lxz/

如何使用CSS3 Transition使IMAGE独立于其周围的元素移动？

1 个答案: