悬停状态和过渡在Chrome - 多个动画一个元素上不适用(Hover state and tra

当我在Chrome（24.0.1312.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和.hoverme然后快速移动鼠标远离.hoverme元素将仅动画旋转和位置。

在我做这个工作，甚至不刷新悬停状态，所以当动画完成，后台保持与网站：悬停背景色...由于某种原因，我不能在这里重现

是否有可能使背景动画？

Answer 1:

这是因为位置发生的事情：绝对在.hoverme

请尝试更改到的位置是：相对加保证金左：150像素; （或需要）纠正的.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/

文章来源: Hover state and transition in Chrome - multiple animations on one element do not apply