Javascript 在单击时停用css应用的悬停样式，并在鼠标移动n px时重新应用它

我有两个不同的背景图像，它们根据悬停的不同而变化，如下所示：

.klass          {background: url(a.jpg);}
.klass:hover    {background: url(b.jpg);}

是否可以在单击时停用css应用的悬停样式（即停止显示b.jpg），并且在鼠标移动（例如5px）之前不重新应用样式

添加另一个类：

.klass, .klass-clicked {background: url(a.jpg);}
.klass:hover    {background: url(b.jpg);}

---

然后单击处理程序可以将元素的类更改为

klassclicked

。然后，您可以绑定一个

mousemove

处理程序，该处理程序检查mounse是否移动了5px，然后将类更改回

klass

悬停对象时将window.myMouseTracker设置为true，取消悬停功能完成时设置为false。它最初未设置，但未定义，在元素悬停之前也不会调用自定义函数

// global mouse tracking
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      if (window.myMouseTracker)
      {
          // call to your tracking function
      }
   }); 
})