禁用css-应用悬停样式点击，并重新应用时，鼠标移动n像素

Deactivate css-applied hover-style on click and reapply it when mouse moves n px

本文关键字：应用 移动 像素 鼠标 样式 悬停 css- 禁用 新应用      更新时间：2023-09-26

我有两个不同的背景图像，它们根据悬停的不同而变化，像这样:

.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);}

然后单击处理程序可以将元素的类更改为klass-clicked。然后，你可以绑定一个mousemove处理程序，检查鼠标是否移动了5px，然后将类更改回klass。

设置窗口。myMouseTracker在悬停对象时设置为true，当悬停函数完成时设置为false。它最初没有设置，但未定义，它也不会调用您的自定义函数，直到您的元素悬停。

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