用壁纸替换整个网站内容

Question

我正在开发一个Web项目，客户端要求我每当光标悬停在页面外时就像用户将光标移动到任务栏，标题栏等那样，然后整个网站内容应替换为封面屏幕。

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

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

Answer 1

您可以在toggleClass和mouseenter上使用mouseleave。

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

CSS

.no-mouse {
    background:red;
}

Demo

修改

---

根据您的评论更新了答案

HTML，

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

JS

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

CSS

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

Demo