悬停时将链接图片5px向上移动 [英] Move link image 5px up on hover

问题描述

我如何获得与此网站的投放网页 Solid Giant 类似的效果，具有CSS和HTML？

How would I go about acheiving an effect similar to that on this site's portfolio page Solid Giant, with CSS and HTML?

我以为只要这样的东西可以工作：

I had thought that just putting something like this would work:

a img{
    margin-top: 5px;
}

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

但它没有工作，即使我把：而不是img。我scoured他的代码和CSS，但我不能为我的生活想出这一点。请帮助：）

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 :)

推荐答案

position：relative p>

position: relative would work:

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

请注意 保留文档流程中的空间，就像移动元素 。但我认为在这种情况下，这不是一个问题。

note that position: relative reserves the space in the document flow as if the element were not moved. But I think in this case, that is not an issue.

这篇关于悬停时将链接图片5px向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！