当我在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元素将仅对旋转和位置进行动画处理。

在我正在处理的网站上,它甚至都没有刷新悬浮状态,因此当动画结束并且背景停留在:hover background-color ...时,由于某种原因,我无法在此处复制

可以使背景动画吗?

最佳答案

发生这种情况是由于position:.hoverme中的absolute

尝试将其更改为position:relative添加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/

10-08 13:58