用壁紙替換整個網站的內容

Question

我正在一個web項目上工作，客戶端要求我這樣做，只要光標懸停在頁面之外，就像用戶將光標移動到任務欄，標題欄等那麼整個頁面網站內容應該用封面屏幕替換。

我想我可以使用jQuery來跟蹤屏幕內的鼠標。如果光標移出屏幕，我可以將整個屏幕的顯示設置爲無，並在整個屏幕上顯示封面圖像。使用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