Question

我如何使用CSS和HTML来实现类似于此网站的投资组合页面Solid Giant的效果？

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

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/

Answer 3

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

你也可以将它包装在另一个有位置的parentdiv：relative set：

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

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

Answer 4

为图片指定一个ID：

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


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

Answer 5

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

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

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

5 个答案: