我正在尝试将视频播放器全屏显示,并且希望控件显示在 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>即使我不再移动鼠标。这将无限期地继续下去,或者直到鼠标再次移动,然后循环重复。
最佳答案
看看我的 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;
}
关于javascript - jQuery mousemove 自行触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40814159/