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

Move link image 5px up on hover(悬停时将链接图像向上移动 5px)

问题描述

我将如何使用 CSS 和 HTML 来实现类似于本网站的作品集页面 Solid Giant 上的效果?

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;
}

但它不起作用，即使我将 :hover 放在链接上而不是 img 上.我搜索了他的代码和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 可以:

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

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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！