google-chrome - Chrome 中的悬停状态和过渡 - 一个元素上的多个动画不适用

Question

当我悬停在 Chrome(24.0.1312.57) 中应用过渡时，它不会在鼠标移出时更新背景颜色。看到这个 fiddle :http://jsfiddle.net/WKVJ9/这是代码:

.transition{
     -webkit-transition: all 500ms ease-in-out;
}
.wrapper{
    width:200px;
    height:200px;
    display:block;
    background-color:cyan;
    position:relative;

}
.hoverme{
    border-radius:90px;
    display: block;
    width:50px;
    height:50px;
    top:50px;
    right:-90px;
    position:absolute;
    -webkit-transform: rotate(-45deg);

}
.wrapper:hover .hoverme{
     -webkit-transform: rotate(0deg);
    right:0;
}
.hoverme:hover{
    background-color:red;
}

和 html:

<div class="wrapper">
    <div class="hoverme transition">
       Hover me
    </div>
</div>

如果您将鼠标悬停在 .wrapper 和 .hoverme 上，然后快速将鼠标移离此框，则 .hoverme 元素只会为旋转和位置设置动画。

在我正在处理的网站上，它甚至不刷新悬停状态，所以当动画完成并且背景保持为 :hover background-color... 由于某种原因我无法在此处重现

是否可以使背景动画化？

Answer 1

这是因为 .hoverme 中的 position:absolute

尝试将其更改为 position:relative add margin-left:150px; (或要求)纠正 .hoverme 的位置......像这样:

.hoverme{
    border-radius:90px;
    display: block;
    width:50px;
    height:50px;
    top:50px;
    right:-90px;
    position:relative;
    margin-left:150px;
    -webkit-transform: rotate(-45deg);

}

在此处检查它的运行情况:http://jsfiddle.net/WKVJ9/1/