css animation +：nth-​​child（）选择器

Question

在“理论”中，班级d的每个奇数条目都应该左转，每个偶数 - 右边。但所有的举动都离开...... 有什么建议可以吗？

       .d {
            -webkit-transition:all 2s;
        }

        .d:nth-child(even):hover {
            left: -10%;
        }

        .d:nth-child(odd):hover {
            left: 10%;
        }

Answer 1

也许你的其他代码搞砸了，这是我做的一个演示，表明它确实有效。

HTML：

<div id="con">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS：

#con {
    position: relative;
}
#con div {
    width: 100px;
    height: 100px;
    display: block;
    border: 1px solid;
    -webkit-transition:all 2s;
}
#con div:nth-child(even):hover {
    position: absolute;
    left: -10%;
    background: red;
}
#con div:nth-child(odd):hover {
    position: absolute;
    left: 10%;
    background: red;
}

取决于你想要怎么做，在这个演示中，当你将鼠标移动到两侧时，我使用了position: absolute;。希望这会对你有所帮助。

DEMO HERE

Answer 2

使用position: relative;获取正确的动画。 e.g：

.d {
    -webkit-transition:all 2s;
    background:#1E5799;
    width:50px;
    height:50px;
    left:0px;
    position: relative;
}