Question

我正处于一种情绪状态，我需要在li的宽度上使用转换，而不是其子img

li元素中有小图片。当用户悬停的li元素width正在使用内部图片展开时。

我正在尝试使用否 transition扩展图片，但其父li需要使用transition展开。

的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

您可以尝试为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。

DEMO

我希望我理解你。祝你好运！

如何应用转换只定义元素，而不是它的子元素？ //简单的手风琴

1 个答案: