删除mouseleave上的css3过渡

Question

演示：http://jsfiddle.net/2vLjU/961/

#slide {
    position: absolute;
    right: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    transition: 0.5s;
        opacity:0;
}

我想要鼠标中心的淡入淡出和幻灯片效果，但不是鼠标左键，因为我觉得它太多了，如何进行单向css3过渡？

Answer 1

您可以将transition移至:hover。然后它只会发生在悬停状态。

.wrapper:hover #slide {
    right: 0;
    opacity:1;
    transition: 0.5s;
}

fiddle