Javascript 用壁纸替换整个网站内容

我正在从事一个web项目，客户要求我在光标悬停在页面外时（如用户将光标移动到任务栏、标题栏等）执行此操作，然后整个网站内容应替换为封面屏幕

我想我可以使用jQuery在屏幕内跟踪鼠标。若光标移出屏幕，那个么我可以将整个屏幕的显示设置为“无”，并在整个屏幕上显示封面图像。使用mouseleave、mouseenter函数

但问题是我对jQuery不太熟悉。帮助我编写代码。

您只需在mouseenter和mouseleave上使用toggleClass即可

CSS

编辑

根据您的评论更新了答案

HTML

CSS

---

替换内容，或通过在内容顶部显示图像来隐藏内容？顺便说一句，如果您不熟悉jQuery，为什么不试试普通JavaScript呢？我们很乐意帮忙！但我们不会为你做你的工作。嗨…不幸的是，对你来说，这不是一个代码编写服务。我建议谷歌搜索可能更有用。谢谢。但这只会改变背景。如果我想用颜色或图像替换网站的全部内容，该怎么办？@ShashankGaurav，请检查更新的回答谢谢，但最后一个帮助是每当光标离开屏幕，然后返回时，内容会自动向上滚动。比如，如果我正在阅读一篇文章，我将光标移出，然后返回，它会自动滚动到顶部。我希望滚动条在光标重新进入该区域时保持不变。请尝试此示例

$('body').toggleClass('no-mouse');
$(document).on('mouseenter mouseleave', function () {
    $('body').toggleClass('no-mouse');
});

.no-mouse {
    background:red;
}

<div class="wrapper test">website content</div>
<div class="no-mouse test">without mouse image or color container.</div>

$(document).on('mouseenter mouseleave', function () {
    $('.test').toggle();
});

.wrapper {
    width:100%;
    height:500px;
    background:green;
    margin:0px;    
    display: none;
}
.no-mouse {
    position :absolute;
    width:100%;
    height:500px;
    background:red;
}
body {
    margin:0px;
}