如何只应用已定义元素的过渡，而不是其子元素?//简单的手风琴

Question

我的情况是我需要在li的宽度上使用过渡，但不是它的子img

li元素有小图像。当用户悬停li元素时，width随图像内部展开。

我试图用扩展图像，没有 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');
    }
});

Answer 1

您可以尝试为px中的图像设置固定的width，而不是%。作为%将采用的容器。

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%; }

和在li上添加overflow;hidden。

演示我希望我理解对了。好运！