Замена всего содержимого сайта обоими

Question

Я работаю над веб-проектом, где клиент требует от меня сделать это всякий раз, когда курсор всплывает из страницы, например, когда пользователи перемещают курсор на панель задач, строку заголовка и т. Д., Тогда весь содержимое веб-сайта следует заменить на экран обложки.

Я думаю, что я могу использовать jQuery для отслеживания мыши внутри экрана. если курсор перемещается из экрана, я могу настроить отображение всего экрана на none и отображать обложку на весь экран. Используйте функции 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

EDIT

---

Обновленный ответ базы на комментарий,

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