CSS hide cursor without firing JavaScript mousemove event

Question

Trying to hide the cusor in a video container along with some controls. I have a small JavaScript function that adds a class to the container on mousemove to show the controls and I looped in some css for cursor: none;. It successfully hides the cursor, but apparently that css change also triggers the mousemove event, so I have an endless loop of starting to fade out and fading right back in.

TLDR; how can I prevent the css cursor change from firing the mousemove event?

• jsFiddle example

• Also worth mentioning, I've seen this other SO post, but don't understand how they're avoiding the event though it does work.

JavaScript

$bod.on('mousemove', '.vidCont', function(){

    var thiis = $(this),
        time  = thiis.data('timer'),
        newTime;

    if (time){

        clearTimeout(time);
    }

    thiis.addClass('showControls');

    newTime = setTimeout(function(){

        thiis.removeClass('showControls');

    }, 2000);

    thiis.data('timer', newTime);
});

Answer 1

As @timgoodman explained, it was a matter of applying the same buffer flag as the previous SO post. The difference in my answer is the scope of the css and mouse event. I'm also using classes for my css changes and combining variables because I'm a boyscout.

• jsFiddle example

  $('body').on('mousemove', '.cont', function(){
  
      var thiis  = $(this),
          time   = thiis.data('timer'),
          buffer = thiis.data('buffer'),
          newTime;
  
      if (!buffer){
  
          if (time){
  
              clearTimeout(time);
          }
  
          thiis.addClass('showControls');
  
          newTime = setTimeout(function(){
  
              thiis.removeClass('showControls');
  
              thiis.data('buffer', true);
          }, 2000);
      } else {
  
          thiis.data('buffer', false);
      }
  
      thiis.data('timer', newTime);
  });