Hover state and transition in Chrome - multiple an

问题:

When I apply transition in Chrome(24.0.1312.57) on hover it does not update background-color on mouse out. See this fiddle: http://jsfiddle.net/WKVJ9/ Here is the code:

.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;
}

and html:

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

If you hover .wrapper and .hoverme and then quickly move mouse away from this box the .hoverme element will only animate rotation and position.

On the site I am working on it does not even refresh hover state so when the animation is finished and the background stays with :hover background-color... Which for some reason I cannot reproduce here

Is it possible to make the background animate?

回答1:

This is happening because of position:absolute in .hoverme

try changing it to position:relative add margin-left:150px; (or required) to correct position of .hoverme ... like this:

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

}

check it in action here: http://jsfiddle.net/WKVJ9/1/