カーソルは表示され続けます（noneに設定されているにもかかわらず）。 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の対話用に設計された要素に適用されるより強い規則を持っています。つまり、<button>秒です。このため、より強力な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 = '';