Question

我在里面有几个图标链接：

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

我正在尝试使用代码使用jQuery为margin-top s IMG 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的开发者工具进行测试）。

内联块并不完全是块元素，应该非常明智地使用，以防止像这样的问题，边缘不像块元素那样。

jQuery这不是选择单个元素

1 个答案: