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:hover不能实现该效果...

- ProgressiveMonkey

---

你在 CSS 中尝试过在 "img" 标签之前使用 "a" 标签吗？ - kumar

或者只是移除position属性？ - Mark

在jsFiddle上运行得很好。您确定您正确链接了CSS文件吗？ - George

看起来它正在工作，http://jsfiddle.net/K7ttL/ 问题出在哪里？ - Okan Kocyigit

Answer 1

这里是解决方案。

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;

}

我希望这能有所帮助。

- Nitesh

---

看不出有什么不同吗？ - Okan Kocyigit

奇怪的是，心理上的满足和确认，没有所谓需要解决的问题。只需添加一个div和一个Google图片就能让他/她感到满意-@ocanal - Nitesh

Answer 2

你的代码应该是可以工作的，我在这里检查过了：http://cssdesk.com/XcV2D

可能还有其他样式会影响它...

- Galen