Chrome中的悬停状态和转换-一个元素上的多个动画不适用

Question

当我在悬停时在Chrome（24.0.13125.57）中应用转换时，它不会在鼠标悬停时更新背景颜色。看看这把小提琴：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和.haverme，然后快速将鼠标从该框中移开，.havelme元素将仅为旋转和位置设置动画。

在我工作的网站上，它甚至不会刷新悬停状态，所以当动画完成时，背景保持为：悬停背景颜色。。。由于某种原因，我无法在这里复制

是否可以设置背景动画？

Answer 1

发生这种情况是因为位置：在.haverme 中为绝对

尝试将其更改为position:relative添加左边距：150px；（或要求）纠正悬停在的位置…像这样：

.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/