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

Question

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

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

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

Answer 1

添加另一个类：

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

然后您的点击处理程序可以将元素的类更改为klass-clicked. 然后，您可以绑定一个mousemove处理程序来检查 mounse 是否已移动 5px，然后将类更改回klass.

Answer 2

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

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