在悬停时向上移动链接图像5px

Question

我将如何实现类似于此网站的产品组合页面Solid Giant,CSS和HTML的效果？

我原以为只要放这样的东西就可以了:

a img{
    margin-top: 5px;
}

a img:hover{
    margin-top: 0px;
}

但它没有用,即使我把:悬停在链接而不是img上.我仔细检查了他的代码和css,但我不能为我的生活弄清楚这一点.请帮忙 :)

Answer 1

position: relative 会工作:

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

请注意,position: relative保留文档流中的空间,就好像元素未移动一样.但我认为在这种情况下,这不是问题.

Answer 2

另见translate():

http://www.w3schools.com/css/css3_2dtransforms.asp

img:hover {
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px)
}

看到一个类似的工作示例:http:
//jsfiddle.net/rimian/7aPvS/1/