Question

I have a few links with icons inside:

<div class="icons">
< href="..."><img src='' /></a>
< href="..."><img src='' /></a>
...
</div>

I’m trying to animate the margin-top css property of the IMGs using jQuery using the code:

$j = jQuery.noConflict();
$j("div.icons a").live({
mouseenter: 
function(){
    $j("img",this).animate({'margin-top': '-10px'}, 500);},
mouseleave:
function(){
    $j("img",this).animate({'margin-top': '-35px'}, 500);}
});

But it is changing the margin-top property of all images within DIV, not only the hovered one. What am I doing wrong?

You can see it working here:
http://pasterzdrzew.pl/

Answer 1

The problem is that you used display: inline-block; on the links, you should use display:block; float:left; and that should do the trick (Tested using Chrome’s Developer Tools).

Inline-block isn’t entirely a block element and should be used very wisely as to prevent problems like this one with margins not behaving exactly like a block element.