0

内部にアイコンのあるリンクがいくつかあります。

<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-topただし、ホバーされた画像だけでなく、DIV内のすべての画像のプロパティが変更されています。私は何が間違っているのですか？

あなたはそれがここで働いているのを見ることができます：http： //pasterzdrzew.pl/

4

1 に答える 1

2

問題はdisplay: inline-block;、リンクで使用したことです。使用display:block; float:left;する必要があり、それでうまくいくはずです（Chromeの開発者ツールを使用してテスト済み）。

インラインブロックは完全にブロック要素ではないため、マージンがブロック要素とまったく同じように動作しないこのような問題を防ぐために、非常に賢明に使用する必要があります。

于 2012-06-07T15:55:54.103 に答える