Question

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

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

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将＆＃34;滑动＆＃34;在它被隐藏之前向左，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;
}

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

1 个答案: