悬停时将链接图像向上移动 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.
相关文章