css - 过渡后悬停

Question

要查看此错误，请将鼠标悬停在此处覆盖框的右侧(悬停后不要移动鼠标 1 像素): http://jsfiddle.net/V99rf/

<style>
.container, .hoverMover {width:100px; height:100px; background:rgba(0,0,0,.2);}
.container {position:relative;}
.hoverMover {position:absolute; top:0; left:50px;}

.container:hover .hoverMover {background:green; left:0;}

.trans {-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
</style>
<div class="container">
  <div class="hoverMover trans">
  </div>
</div>

请注意，即使在 dom 元素向左移动后，它仍保持绿色并设置了“:hover”。一旦您移动鼠标，它就会取消设置。当 dom 元素从鼠标下方移动时，即使鼠标未移动，我如何使其取消设置？

递归的 javascript 超时是不令人满意的，但可能是唯一的方法......？

Answer 1

这只有在事件中才有可能，因此您需要某种迭代循环来完成您正在寻找的内容。