Javascript 当鼠标移动到屏幕上的任何位置而不仅仅是元素本身时，如何显示div？

当用户将鼠标移到特定元素上时，我设法隐藏和显示了我的类。但我真正想要的是，当用户将鼠标移动到屏幕上的任何位置时，而不仅仅是所选的div时，就会显示这些内容

这是我当前的代码：

$(window).on('mousemove', function () {
  $('.barhide').addClass('show');
  try {
    clearTimeout(timer);
  } catch (e) {}
  timer = setTimeout(function () {
    $('.barhide').removeClass('show');
  }, 1000);
});

还有我的css：

.barhide{
背景：#333；
颜色：#fff；
显示：块；
不透明度：0；
过渡：所有1.5s轻松；
}
.barhide.show{
不透明度：1；
显示：无；
}

所以我想要的是，3秒钟后，带有.barhide的类被隐藏，如果用户将鼠标移动到屏幕中的任何位置，它们将再次显示，而不是仅当它们移动到元素上时

---

此外，我还想知道使用React做这些事情是否容易得多？

我对代码进行了一些重组，并添加了一些注释来解释发生了什么以及何时发生。此外，请丢失

try

，因为尝试清除计时器不会引发异常

请记住，

mouseover

type事件是移动设备上的一个问题。这两个条款在这方面可能有所帮助：

$（函数（）{
//加载页面时，等待3秒钟并使用.barhide类隐藏所有元素：
设置超时（切换，3000）；
});
var定时器=null；
//用于添加/删除“隐藏”类的常规函数。
//这在页面首次加载时使用，每次
//鼠标在页面上移动。我们不是在调用toggle（）
//这是因为可能会发生闪烁效应，这将导致
//元素显示而不是隐藏。
函数切换（）{
$（'.barhide'）.toggleClass（'hide'）；
}
$（window）.on（'mousemove'，function（））{
//当页面上的任何地方被鼠标移到上方时，返回。barhide
//元素3秒。删除“隐藏”只需恢复
//原始CSS和布局
$（'.barhide'）.removeClass（'hide'）；
//杀死以前的计时器
清除超时（计时器）；
//等待3秒钟，然后再次隐藏
定时器=设置超时（切换，3000）
});
.barhide{背景色：蓝色；}
.hide{display:none；}

一个
两个
您只需计算正在运行的计时器的nr，当最后一个计时器结束时，您将隐藏该条

var count = 0;

$(window).mousemove(function( event ) {
  $('.barhide').show();
  count += 1;

  setTimeout(function() {
    if (count == 1) {
      $('.barhide').hide();
    }
    count -= 1;
  }, 3000);
});

您无意中删除了
clearTimeout（）
调用too。如果您继续将鼠标移动到元素上，您将看到它由于未显示旧的超时而不断快速出现/消失cleared@RoryMcCrossan是的，我在看另一段代码。还没醒！答案已更新。这实际上并不是我想要的工作方式。现在，当我将鼠标移到元素的表面区域而不是整个页面时，它仍然只显示元素。@Deelux您能更具体一点吗？“在其表面区域而不是整个页面上显示元素”是什么意思？这不起作用，现在元素不再隐藏。