1

I am in a sitiation which i need to use transition on li's width but not its child img

There is small images in li element. When user hover's li element width is expanding with inside image.

I am trying to expand image with no transition but its parent li need expand with transition.

Here is jsFiddle example.

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 回答