如何在悬停时

Question

我希望我的元素（我已命名为类优惠按钮）在悬停时从左侧滑入。我创建了以下两套css规则，但我没有运气：

.benefit-buttons {
     transition-property: color, left;
     transition-duration: 200ms;
     transition-delay: .1s;
     transition-timing-function: ease-in-out;
}
.benefit-buttons:hover {
    opacity: 1;
    color: #FF0000;
    left: 50%;
}

Answer 1

元素不能具有left属性，除非它是绝对定位的（read more）。尝试左边距作为替代：

.benefit-buttons {
    width: 25%;
    transition-property: all;
    transition-duration: 200ms;
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
}

.benefit-buttons:hover {
    opacity: 1;
    color: #FF0000;
    margin-left: 10%;
}

<强> Demo