光标继续显示，尽管已设置为无光标，并且只在光标位于div上时才出现。Angular2/Javascript

Question

所以我遇到了一个光标的问题。基本上，我的菜单允许键盘导航，所以每当按下一个键时，它会隐藏光标。

这个很好用 (左侧截图)，但是当鼠标恰好位于菜单本身上方时，尽管body显示内联样式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

- Kevin

Answer 1

你似乎想要在整个网站中隐藏光标。

首先，我想强调，在普遍意义上，这被认为是一个糟糕的设计决定，会影响到可用性和可访问性。首先，完全可以使用CSS来实现这个效果，这也是推荐的方法。因此，请先删除所有与隐藏光标相关的脚本，因为它们很可能会干扰我即将提出的方法，使其无效。

body {
  cursor: none;
}

理论上应该能解决问题。

但是，正如上面所述的原因，大多数浏览器对于专门用于指针交互设计的html元素，在光标属性方面有更强的规则适用。也就是说，对于<button>按钮，您需要使用更强的CSS规则。比如：

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

如果您不想将此应用于所有元素，请随意使用更具体的选择器替换 body。

- tao

Answer 2

看起来你需要一些CSS：

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

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

- kemsky