CSS 动画 + :nth-child() Selector

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