仅在鼠标移动时显示元素，而在不移动时隐藏吗？

Question

希望在这种情况下，大家都过得不错。我有一个网页的右下角有一个按钮（位置：固定）。我希望按钮在屏幕上的鼠标移动时显示（不一定在按钮的位置上，而实际上在任何位置），并且当鼠标不移动时按钮不应该可见。有什么方法可以用最少的编程量做到这一点？非常感谢任何帮助！

（（您可以访问此页面获得类似的示例-http://calmlywriter.com/online/。当鼠标不移动时，给定的页面将隐藏徽标。）

编辑-

这是我到目前为止所尝试的，但似乎并不能完全满足我的要求。当用户将鼠标移到特定区域上时，它只会显示按钮的外观。我希望按钮在用户移动鼠标时出现，而在鼠标不隐藏时隐藏。如前所述，我在编码方面经验不足。抱歉，我无法提供更多详细信息，请发表评论。

    .elementToBeHidden {
  display: none;
}

.Button:hover + .elementToBeHidden {
  display: show;
}

Answer 1

您可以尝试这样的事情：

给您的按钮一个ID，在本示例中为'button'。此代码将在鼠标移动时显示它，然后在1秒钟的延迟后消失。

编辑：在jQuery脚本调用之后，将此代码包装在脚本<script></script>标记中。如果您已经有了jQuery，请不要为其添加脚本标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

var timedelay = 0;
function delayCheck(){
    if(timedelay == 1) {
        $('#button').fadeOut();
        timedelay = 1;
}
    timedelay = timedelay+1;
}
    $(document).mousemove(function() {
    $('#button').fadeIn();
    timedelay = 0;
    clearInterval(_delay);
    _delay = setInterval(delayCheck, 500);
});
// page loads starts delay timer
_delay = setInterval(delayCheck, 500)

如果允许，这里是一个codepen：Codepen