css - 悬停时将链接图片向上移动 5 像素

Question

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

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

a img{
    margin-top: 5px;
}

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

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

Answer 1

position: relative 可以工作:

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

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