javascript - jQuery mousemove 自行触发

Question

我正在尝试将视频播放器全屏显示，并且希望控件显示在 mousemove 上。由于没有 mousestop 我只是启动了一个计时器，如果它完成，它将隐藏工具。

问题 – 由于我怀疑回调的性质，效果会在显示和隐藏之间来回切换。 mouseMoving 类在 css 中用于添加 display: block !important，当它被删除时，theControls 返回到它的原始 css，即 显示:无!重要

 $('#theDiv').mousemove(

        function()
        {
          //When the mouse is moving, add the class which adds display: block !important
          $('#theControls').addClass('mouseMoving');

          // Clear the timer each time the mouse moves, so that if the mouse doesnt move for a full 2 seconds,
          // hide the controls by removing the afforementioned class.

          clearTimeout(timer);

          var timer = setTimeout(

            function() 
            {
              $('#theControls').removeClass('mouseMoving');
            },

          2000);
        }
      );

事实上，如果你进入全屏并移动鼠标，控件将出现，然后隐藏，然后开发工具将显示类 mouseMoving 不断被追加和删除，< em>即使我不再移动鼠标。这将无限期地继续下去，或者直到鼠标再次移动，然后循环重复。

Answer 1

看看我的 fiddle 。 https://jsfiddle.net/Lfzt5u9j/37/

基本上，取!important您的属性(property) display:none !important; css 部分并将其放在 display:block 上在.mouseMoving 。您必须这样做的原因是因为 css 的 ID 部分中的任何内容都会覆盖 css 的 CLASS 部分。如果你不明白，请摆弄我的 fiddle 或提出问题:D

然后，让你的 Js 看起来像我的 fiddle 。

var timer;
$('#theDiv').mousemove(function() {
    //When the mouse is moving, add the class which adds display: block !important
    //console.log($('.mouseMoving'));
    $('#theControls').addClass('mouseMoving');

    // Clear the timer each time the mouse moves, so that if the mouse doesnt move for a full 2 seconds,
    // hide the controls by removing the afforementioned class.
    clearTimeout(timer);
    timer = window.setTimeout(function() {
        $('#theControls').removeClass('mouseMoving');
    }, 2000);
});

实际上，为了覆盖!important在您的情况下，您所要做的就是使类选择器更加具体。

就像你的类(class) mouseMoving是

.mouseMoving {
    display:block !important;
}

将其更改为:

div#theControls.mouseMoving {
    display:block !important;
}