CSS悬停图像位置更改答案

【问题标题】：CSS hover image position changeCSS悬停图像位置更改
【发布时间】：2013-05-01 05:08:36
【问题描述】：

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

所以我在 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...

【问题讨论】：

你在css中的“img”标签之前尝试过“a”标签吗？
或者只是删除位置属性？
工作愉快here on jsFiddle。您确定正确链接了 CSS 文件吗？
好像可以了，jsfiddle.net/K7ttL有什么问题？

标签： html css hover position

【解决方案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;

}

我希望这会有所帮助。

【讨论】：

看不出有什么不同？
奇怪，但心理上的满足和确认没有什么叫做问题需要解决。只是通过添加一个 div 和一个谷歌图片来满足他/她 - @ocanal

【解决方案2】：

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

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

【讨论】：