CSS悬停图像位置变化

Question

我确定这是一个非常愚蠢的东西，但我已经被困了一段时间，现在......所以，我在网站上有图像，我希望它们在悬停时略微移动。

所以我在HTML中：

<a href="someaddress"><img class="thumb" src="somefile"/></a>

在CSS中：

img.thumb {
    position:relative;
    top:0px;
    background:#333399;

}

img.thumb:hover {
    position:relative;
    top:5px;    
    background:#00CCCC;

}

背景只是为了看看是否发生了什么。实际上，背景不会改变，因此永远不会考虑悬停。有没有人知道为什么会这样？

编辑

非常感谢大家！

我实际上通过投掷一个解决了它：

a > img.thumb:hover {
position:relative;
top:2px;
}

哪个有效。还是不确定为什么它只能与img.thumb一起工作：悬停......

Answer 1

这是solution。

HTML：

<div>
<a href="someaddress"><img class="thumb" src="http://www.google.co.in/images/srpr/logo4w.png"/></a>
</div>

CSS：

img.thumb {
    position:relative;
    top:0px;

}

img.thumb:hover {
    position:relative;
    top:5px;    
    background:#00CCCC;

}

我希望这有帮助。

Answer 2

你的代码应该可行，我在这里查了一下：http://cssdesk.com/XcV2D

其他一些风格应该会影响......