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

Question

I have two different background images that change depending on hover like so:

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

Is it possible to deactivate css-applied hover-style (ie stop displaying b.jpg) on click and not reapply the style until mouse has moved eg 5px?

Answer 1

Add another class:

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

Then your click handler can change the class of the element to klass-clicked . You can then bind a mousemove handler that checks whether the mounse has moved 5px, and then change the class back to klass .

Answer 2

Set window.myMouseTracker to true when hovering the object, false when your unhover function is done. It is initially not set, but undefined which doesn't call your custom function either until your element was hovered.

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