전체 웹 사이트 콘텐츠를 배경 화면으로 바꾸기

Question

나는 웹 프로젝트에서 작업하고 있는데, 클라이언트가 작업 표시 줄, 제목 표시 줄 등으로 커서를 옮길 때와 같이 커서가 페이지 밖으로 나가는 경우 웹 사이트 콘텐츠는 표지 화면으로 대체해야합니다.

jQuery를 사용하여 화면 내에서 마우스를 추적 할 수 있다고 생각합니다. 커서가 화면 밖으로 나오면 전체 화면을 none으로 설정하고 전체 화면에 표지 이미지를 표시 할 수 있습니다. mouseleave(), mouseenter() 함수를 사용하십시오.

하지만 문제는 jQuery에 익숙하지 않다는 것입니다. 코드 작성을 도와주세요.

Answer 1

mouseenter 및 mouseleave에 toggleClass을 간단하게 사용할 수 있습니다.

$('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