CSS hover image position change

问题

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...

回答1:

Here is the solution.

The HTML:

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

The CSS:

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

}

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

}

I hope this helps.

回答2:

Your code should work, I have checked it here: http://cssdesk.com/XcV2D

Some other styles should be impacting...

来源：https://stackoverflow.com/questions/16415786/css-hover-image-position-change