jquery - jQuery 这不选择单个元素

Question

我有一些带有图标的链接：

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

我正在尝试使用 jQuery 使用代码margin-top为 s 的 css 属性设置动画：IMG

$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);}
});

但它正在改变margin-topDIV 中所有图像的属性，而不仅仅是悬停的图像。我究竟做错了什么？

你可以在这里看到它的工作：http: //pasterzdrzew.pl/

Answer 1

问题是您display: inline-block;在链接上使用了，您应该使用display:block; float:left;并且应该可以解决问题（使用 Chrome 的开发人员工具测试）。

Inline-block 并不完全是块元素，应该非常明智地使用它，以防止出现这样的问题，因为边距与块元素的行为不完全相同。