javascript - windows 8 hover to slide effect 使用css和js

Question

我认为仅凭 css3 就可以做到这一点，我被卡住了，因为我仍然试图理解 css3 中的“轻松”之类的东西。

到目前为止我的进步http://jsfiddle.net/kwgy9/1/

'nike' 应该向左滑动，'just do it' 从右边慢慢出现。需要帮助!

$("#box").mouseenter(function(){

}).mouseleave(function(){

});

Answer 1

试试这个 jsfiddle , 我想这就是你想要的

body {
    font-family:'Fenix', serif;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
}
#box {
    width: 160px;
    height: 60px;
    background: orange;
    text-align:center;
    border:2px solid orange;
    border-radius:5px;
    cursor:pointer;
    display: inline-block;
    overflow:hidden;
    position:relative;
    transition: all 1s ease;
}

#box:hover {
    color:orange;
    background:#FFF;
}

#box:hover > p {
    left:-160px;
}

#box > p{
    color:white;
    transition: all 1s ease;
    position:absolute;
    top:0px;
    left:0px;
    font-size:24px;
    line-height:60px;
    display:inline-block;
    margin:0px;
    padding:0px;
    width:160px;
}

#box > span{
    white-space:no-wrap;
    position:absolute;
    top:0px;
    left:160px;
    display:inline-block;
    transition: all 1s ease;
    width:160px;
    font-size:24px;
    line-height:60px;
}

#box:hover>span{
    color:orange;
    left:0px;
}