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

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

CSS悬停图像位置变化

2 个答案: