CSS 悬停时将链接图像向上移动 5px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5449031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move link image 5px up on hover
提问by Amanda
How would I go about acheiving an effect similar to that on this site's portfolio page Solid Giant, with CSS and HTML?
我将如何使用 CSS 和 HTML实现与本网站的投资组合页面Solid Giant类似的效果？
I had thought that just putting something like this would work:
我原以为只要放上这样的东西就行了：
a img{
margin-top: 5px;
}
a img:hover{
margin-top: 0px;
}
But it did not work, even if I put the :hover on the link instead of the img. I scoured his code and css but I could not for the life of me figure this out. Help please :)
但它不起作用，即使我将 :hover 放在链接上而不是 img 上。我搜索了他的代码和 css，但我终生无法弄清楚这一点。请帮忙 ：）
回答by Pekka
position: relativewould work:
position: relative会工作：
a img:hover{ position: relative;
top: -5px;}
note that position: relativereserves the space in the document flow as if the element were notmoved. But I think in this case, that is not an issue.
请注意，position: relative在文档流中保留空间，就好像元素没有移动一样。但我认为在这种情况下，这不是问题。
回答by Rimian
Also see translate():
另见翻译（）：
http://www.w3schools.com/css/css3_2dtransforms.asp
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)
}
See a similar working example:
http://jsfiddle.net/rimian/7aPvS/1/
查看类似的工作示例：http:
//jsfiddle.net/rimian/7aPvS/1/
回答by Senica Gonzalez
You could also use CSS/HTML5 animations: http://slides.html5rocks.com/#css-animation
您还可以使用 CSS/HTML5 动画：http: //slides.html5rocks.com/#css-animation
you could also wrap it in another parentdiv that has position:relative set:
您也可以将它包装在另一个具有 position:relative 集的 parentdiv 中：
<div class="parent">
<img class="image" />
</div>
.parent {
position:relative;
}
.image {
position:absolute;
top:0px;
left:0px;
}
.image:hover {
top:-15px;
}
回答by Lauw
Give the image an id:
给图像一个id：
<img id="imgHover" src="" />
#imgHover:hover { margin-top: -5px; }
回答by Doug
Make sure you have this in your html so IE knows how to work properly
确保你的 html 中有这个，这样 IE 就知道如何正常工作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
