当我在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/