Html CSS 悬停图像位置更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16415786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hover image position change
提问by ProgressiveMonkey
I'm certain it's something super stupid, but I've been stuck for a while, now... So, I have images on a website, and I'd like them to move slightly on hover.
我敢肯定这是非常愚蠢的事情，但我已经被卡住了一段时间，现在...所以，我在网站上有图像，我希望它们在悬停时稍微移动。
So I have in the HTML:
所以我在 HTML 中有：
<a href="someaddress"><img class="thumb" src="somefile"/></a>
And in the CSS:
在 CSS 中：
img.thumb {
position:relative;
top:0px;
background:#333399;
}
img.thumb:hover?{
position:relative;
top:5px;
background:#00CCCC;
}
The backgrounds are there just to see whether something is happening. Actually, the background doesn't change, so the hover is never taken into account. Does anyone have an idea why that could be??
背景只是为了看看是否正在发生某些事情。实际上，背景不会改变，因此从不考虑悬停。有谁知道为什么会这样？？
EDIT
编辑
Thanks a lot, everyone!
非常感谢大家！
I actually solved it by throwing in a:
我实际上通过抛出一个来解决它：
a > img.thumb:hover {
position:relative;
top:2px;
}
Which worked. Still not exactly sure why it didn't work just with img.thumb:hover...
哪个有效。仍然不确定为什么它不能仅与 img.thumb:hover 一起使用...
回答by Nitesh
Here is the solution.
这是解决方案。
The HTML:
HTML：
<div>
<a href="someaddress"><img class="thumb" src="http://www.google.co.in/images/srpr/logo4w.png"/></a>
</div>
The CSS:
CSS：
img.thumb {
position:relative;
top:0px;
}
img.thumb:hover {
position:relative;
top:5px;
background:#00CCCC;
}
I hope this helps.
我希望这有帮助。
回答by Galen
Your code should work, I have checked it here: http://cssdesk.com/XcV2D
你的代码应该可以工作，我已经在这里检查过：http: //cssdesk.com/XcV2D
Some other styles should be impacting...
其他一些风格应该会影响...
