1

の幅でトランジションを使用する必要があるliが、その子では使用しない状況にありますimg

要素に小さな画像がありliます。ユーザーホバーのli要素widthが画像内で展開されている場合。

no で画像を展開しようとしていtransitionますが、その親liは で展開する必要がありtransitionます。

これが jsFiddle の例です。

CSS:

ul.images { position:fixed; top:0px;left:0px; width:2660px; }
  ul.images li { 
    float:left;
    margin-right:1px;
    background: red;
    overflow:hidden;
    height: 500px;
    padding:10px;
    width:50px; 
-webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
}

ul.images li img { 
    float:left; width:100%; height: auto;

 /* this doesn't work */
-webkit-transition: all 0s;
   -moz-transition: all 0s;
     -o-transition: all 0s;
    -ms-transition: all 0s;
        transition: all 0s;
}
ul.images li.active { float:left; width: 270px; }
ul.images li.active img { height: 100%; }

jQuery:

$('ul.images li').first().addClass('active');
$('ul.images li').bind({
    mouseenter: function() {
        $('ul.images li').removeClass('active');
        $(this).addClass('active');
    }
});
4

1 に答える 1

1

ではなくwidth、画像の固定を設定してみてください。コンテナに採用されるように。px%%

ul.images { position:fixed; top:0px;left:0px; width:2660px; }
ul.images li { 
    float:left;
    margin-right:1px;
    background: red;
    overflow:hidden;
    height: 500px;
    padding:10px;
    width:50px; 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow:hidden;
}

ul.images li img { 
    float:left; width:50px; height: auto;
}
ul.images li.active { float:left; width: 270px; }
ul.images li.active img { width:270px; height: 100%; }

に追加overflow;hiddenしliます。

デモ

私はあなたを正しく理解したと思います。幸運を！

于 2013-05-17T09:01:33.683 に答える