光標繼續顯示 - 儘管它被設置爲無，並且只在超過一格時顯示。 Angular2/Javascript

Question

所以我遇到了一個非常奇怪的問題。基本上，我的菜單允許鍵盤導航，所以無論何時按下一個鍵，它都會隱藏光標。

這很好用（左截圖），但是當我將鼠標直接放在菜單本身上時，儘管主體顯示內聯樣式cursor: none，但光標並不隱藏。

http://i.imgur.com/1VvS3H2.png

下面是隱藏光標代碼：

onKey(event: KeyboardEvent) { 
    var key = event.keyCode; 

    //User hit an arrow key, so we can assume they want to navigate using the arrows. 
    //Remove the mouse, until the mouse is moved again. 
    if (key == 38 || key == 40 || key == 8 || key == 13) 
    { 
     document.body.style.cursor = 'none'; 
     this.mouseHidden = true; 
    } 

    ... 
} 

這裏是返回它的代碼：

onMouseMove() 
{ 
    if (this.mouseHidden) { 
     this.mouseHidden = false; 
     document.body.style.cursor = 'default'; 
    } 
} 

這裏是我的菜單模板：

<div id="menuContainer" *ngIf="!this.displaySplash" (mousemove)="onMouseMove($event)"> 
    <div id="menu" class="cl-effect-1"> 
     <div id="menuHeader"> 
      <h1>{{gameName}}</h1> 
     </div> 
     <div id="menuContents" #menuContainer> 
      <div id="homeMenu" *ngIf="this.displayHome" #homeMenu> 
       <button class="mainmenu-button" id="play-button" (click)="pressedPlay()" (mouseover)="onMouseEnter($event)">Play</button> 
       <button class="mainmenu-button" id="music-button" (click)="pressedMusic()" (mouseover)="onMouseEnter($event)">Music</button> 
       <button class="mainmenu-button" id="credits-button" (click)="pressedCredits()" (mouseover)="onMouseEnter($event)">Credits</button> 
       <button class="mainmenu-button" id="exit-button" (click)="pressedBack()" (mouseover)="onMouseEnter($event)">Exit</button> 
      </div> 
      <div id="soundMenu" *ngIf="displaySound" #soundMenu> 
       <button class="mainmenu-button" id="mute-button" (click)="pressedMute()" (mouseover)="onMouseEnter($event)">Mute</button> 
       <button class="mainmenu-button" id="volUp-button" (click)="pressedVolUp()" (mouseover)="onMouseEnter($event)">Volume +</button> 
       <button class="mainmenu-button" id="volDown-button" (click)="pressedVolDown()" (mouseover)="onMouseEnter($event)">Volume -</button> 
       <button class="mainmenu-button" id="back-button" (click)="pressedBack()" (mouseover)="onMouseEnter($event)">Back</button> 
      </div> 
      <div id="creditsMenu" *ngIf="displayCredits" #creditsMenu> 
       <p class="mainmenu-text">Author: <a href="http://www.kilomikewebsites.com">Kilo Mike Software</a></p> 
       <p class="mainmenu-text">License: Open Source</p> 
       <p class="mainmenu-text">Music License: Public Domain</p> 
       <button class="mainmenu-button" id="back-button" (click)="pressedBack()" (mouseover)="onMouseEnter($event)">Back</button> 
      </div> 
     </div> 
    </div> 

我不確定還有什麼可以包含的，因爲我真的不知道爲什麼會發生這種情況。

任何幫助將不勝感激！

乾杯。

編輯：哦，你可以查看這裏的問題：https://steamboatt.github.io/gravity/ 源代碼：https://github.com/Steamboatt/gravity

Answer 1

你似乎想隱藏在你的整個網站的光標。

我想通過這個概述開始被認爲，在一般情況下，一個設計決策較差，可用性和無障礙方面。首先，這可以完全用CSS來完成，並且它是推薦的方式。所以，首先，請刪除與隱藏光標有關的所有腳本，因爲它們很可能會與我即將提出的方法進行交互，從而使其無效。

body { 
    cursor: none; 
} 

理論上應該這樣做。

但是，當涉及到cursor屬性時，大多數瀏覽器正好出於上述原因，適用於爲pointer交互設計的html元素有更強的規則。即，對於<button> s。這就是爲什麼你需要更強大的CSS規則應用。如：

body *, body button { 
    cursor: none !important; 
} 

如果你不希望這個應用在所有的元素，隨時與一個更具體的選擇，以取代body。

Answer 2

看起來像你需要一些CSS：

body.hide-cursor * { 
    cursor: none; 
} 

document.body.className = 'hide-cursor'; 
//or 
document.body.className = '';