我在里面有几个图标链接:
<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/
答案 0 :(得分:2)
问题是您在链接上使用了display: inline-block;
,您应该使用display:block; float:left;
,这应该可以解决问题(使用Chrome的开发者工具进行测试)。
内联块并不完全是块元素,应该非常明智地使用,以防止像这样的问题,边缘不像块元素那样。