jQuery 这不选择单个元素

Question

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

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

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

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

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

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

Answer 1

问题是你在链接上使用了display: inline-block;，你应该使用display:block; float:left; 这应该可以解决问题(使用 Chrome 的开发者工具进行测试)。

内联 block 不完全是一个 block 元素，应该非常明智地使用它来防止像这样的边距表现得不像 block 元素的问题。