Question

我有这段代码：

.wrapper {
width: 100%;
height: 300px;
}
.wrapper > div {
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
}
.wrapper > div img {
display: block;
width: 600px;
height: 600px;
margin: 5% auto 0px auto;
}
.wrapper > div:hover {
width: 100%;
left: 0;
z-index: 2;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
}
.left {
background: #000000;
left: 0;
}
.right {
background: #ffffff;
right: 0;

当你将鼠标悬停在左侧时，它会按照预期进行操作，但是当你将鼠标悬停在右侧时，它会变得疯狂并且不起作用，任何想法都可以解释为什么？

编辑：我链接了错误的JSFiddle，这是正确的： http://jsfiddle.net/TjJrs/

Answer 1

删除left: 0;：

.wrapper > div:hover {

    width: 100%;
    /*left: 0;*/ 
    z-index: 2;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: ease;
}

请参阅DEMO

为什么这个CSS3过渡只能在一边工作？

1 个答案: