CSS宽度过渡从右向左展开图像？

Question

我想制作这个箭头按钮，当它悬停时，从右向左用不同的彩色箭头'填充'。但目前我只能让图像从右侧飞入，或者实际上是从图像的左侧扩展，但是与容器的右侧对齐。

http://jsfiddle.net/ineomod/ZXq3s/

小提琴显示左箭头是错误的例子，右箭头是...权。

HTML：

<div id="arrow-left"> 
    <div id="arrow-left_up"></div> 
    <div id="arrow-left_over"></div> 
</div> 
<div id="arrow-right"> 
    <div id="arrow-right_up"></div> 
    <div id="arrow-right_over"></div> 
</div> 

CSS：

#arrow-left { 
    width: 96px; 
    height:96px; 
    position: relative; 
    float:left; 
    } 
#arrow-left_up { 
    background:url('http://placekitten.com/g/100/100'); 
    width:96px; 
    height:96px; 
    position: absolute; 
} 
#arrow-left_over { 
    background:url('http://placekitten.com/100/100'); 
    width:0px; 
    height:96px; 
    position: absolute; 
    right: 0px; 
    top:0px; 
    -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
      transition: all 0.2s ease-out; 
} 
#arrow-left:hover #arrow-left_over { 
width: 96px; 
-webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    -o-transition: all 0.2s ease-out; 
     transition: all 0.2s ease-out; 
} 


#arrow-right { 
    width: 96px; 
    height:96px; 
    position: relative; 
    float:left; 
} 
#arrow-right_up { 
    background:url('http://placekitten.com/g/100/100'); 
    width:96px; 
    height:96px; 
    position: absolute; 
} 
#arrow-right_over { 
    background:url('http://placekitten.com/100/100'); 
    width:0px; 
    height:96px; 
    position: absolute; 
    left: 0px; 
    top:0px; 
    -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
      transition: all 0.2s ease-out; 
} 
#arrow-right:hover #arrow-right_over { 
    width: 96px; 
    -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
      transition: all 0.2s ease-out; 
} 

Answer 1

那么我所做的是使over可见所有的时间width: 96px;但把它放在下up与z-index: -1;。然后，当您悬停时，up将“向左滑动”，直到其隐藏，并且将出现over。

http://jsfiddle.net/27dJZ/

#arrow-left_up { 
    background:url('http://placekitten.com/g/100/100'); 
    width:96px; 
    height:96px; 
    position: absolute; 

    -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
      transition: all 0.2s ease-out; 
} 
#arrow-left_over { 
    background:url('http://placekitten.com/100/100'); 
    width:96px; 
    height:96px; 
    position: absolute; 
    right: 0px; 
    top:0px; 
    z-index: -1; 
} 
#arrow-left:hover #arrow-left_up { 
    width: 0px; 
    -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
      transition: all 0.2s ease-out; 
}