悬停时将链接图像向上移动 5px答案

【问题标题】：Move link image 5px up on hover悬停时将链接图像向上移动 5px
【发布时间】：2011-07-23 20:54:26
【问题描述】：

我将如何使用 CSS 和 HTML 实现与本网站的投资组合页面 Solid Giant 上的效果类似的效果？

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

a img{
    margin-top: 5px;
}

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

但它不起作用，即使我将 :hover 放在链接上而不是 img 上。我搜索了他的代码和 css，但我一生都无法弄清楚这一点。请帮忙:)

【问题讨论】：

标签： css hover onhover

【解决方案1】：

position: relative 可以工作：

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

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

【讨论】：

+1 获取有关position: relative 的信息。不知道。
添加 padding-bottom: 5px 以消除“闪烁”

【解决方案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/

【讨论】：

【解决方案3】：

您也可以使用 CSS/HTML5 动画：http://slides.html5rocks.com/#css-animation

你也可以将它包装在另一个具有 position:relative 集的 parentdiv 中：

<div class="parent">
  <img class="image" />
</div>

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}

【讨论】：

【解决方案4】：

你可以使用#

在 HTML 中?

<div> id="move" </div>

在 CSS 中?

#move {
position: relative;
top: 0;
transition: top ease 1s;
}
#move:hover {
top: -5px;
}

【讨论】：

【解决方案5】：

给图片一个id：

<img id="imgHover" src="" />


 #imgHover:hover { margin-top: -5px; }

【讨论】：

【解决方案6】：

确保你的 html 中有这个，以便 IE 知道如何正常工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【讨论】：