Question

我正在尝试全屏播放视频播放器，我希望控件显示在mousemove上。由于没有mousestop我刚开始计时器，如果它完成，它将隐藏工具。

问题 - 由于我怀疑回调的性质，效果会在show和hide之间来回切换。在{c}中使用类mouseMoving来添加display: block !important，当它被删除时，theControls会返回原始的css display: none !important

 $('#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一直被追加和删除，甚至虽然我不再移动鼠标。这将无限期地继续，或直到鼠标再次移动，但随后循环重复。

Answer 1

看看我的小提琴。 https://jsfiddle.net/Lfzt5u9j/37/

基本上，将!important属性从css中的display:none !important;部分移开，并将其放在display:block的{{1}}中。你必须这样做的原因是因为你的CSS的ID部分中的任何内容都会覆盖你的CSS的CLASS部分。如果你没有得到它，请弄乱我的小提琴或提问：D

然后，让你的Js看起来像我的小提琴。

.mouseMoving

实际上，为了覆盖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课程

一样

mouseMoving

将其更改为：

.mouseMoving {
    display:block !important;
}

jQuery mousemove自行触发

1 个答案: