CSS悬停图像位置更改 [英] CSS hover image position change

问题描述

我确定这是一件超级愚蠢的事情，但我一直被困在一段时间，现在......所以，我在网站上有图片，我希望它们在悬停时略微移动。

所以我在HTML中：

 < a href =someaddress >< img class =thumbsrc =somefile/>< / a> 
  

而在CSS中：

  img.thumb {
 position：relative; 
 top：0px; 
背景：＃333399; 
 
} 
 
 img.thumb：hover {
 position：relative; 
 top：5px; 
背景：＃00CCCC; 
 
 
 $ / code $ / pre 
 
 
背景只是为了看看是否有事情发生。实际上，背景没有改变，所以悬停从未被考虑。有没有人有一个想法，为什么这可能是？
 
 
 
 编辑 
 
 
 
谢谢很多，每个人！
 
 
 
我实际上通过抛出一个来解决它： 
 
 
  a> img.thumb：hover {
 position：relative; 
 top：2px; 
} 
  
其中有效。仍然不完全确定它为什么不工作只是与img.thumb：hover ... 
解决方案
你的代码应该工作，我在这里检查过它： http://cssdesk.com/XcV2D  
 
 
 
其他一些风格应该会影响......  
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:
<a href="someaddress"><img class="thumb" src="somefile"/></a>
And in the 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...
解决方案
Your code should work, I have checked it here: http://cssdesk.com/XcV2D

Some other styles should be impacting...

                        
这篇关于CSS悬停图像位置更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！