如何在最后单击其他页面内容之前停止过渡效果？

Question

 .div-box{
     position: relative;
     top:0;
     left: 0;
     width: 100px;
     height: 100px;
     background: red;
     transition:all 1s linear ;
 }
 .div-box:hover{
     transform: translate(100px,0);
 }

如何在最后单击其他页面内容之前停止过渡效果？