鼠标悬停时将链接图片上移5像素

Question

鼠标悬停时将链接图片上移5像素

22

如何使用CSS和HTML实现类似于此网站Solid Giant的作品集页面效果？

我曾尝试过这样做，但并没有成功：

a img{
    margin-top: 5px;
}

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

但是它没有起作用，即使我将:hover放在链接上而不是图像上。我仔细查看了他的代码和CSS，但我无论如何也无法弄清楚这个问题。请帮忙 :)

- Amanda

6个回答

18

也可以查看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/

- Rimian

0

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

你还可以将其包装在另一个具有position:relative设置的父div中：

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

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

- Senica Gonzalez

-1

你可以使用 id

在 HTML 中

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

CSS中的内容

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

注意：当我尝试过渡时，它没有起作用，如果您的代码中不使用js，则使用id没有任何意义。

- mansouri-Q

-2

给图片一个ID：

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


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

- Lauw

-2

请确保在您的HTML中包含此内容，以便IE能够正常工作

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

- Doug

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pekka · Accepted Answer

position: relative 可以起作用:

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

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