javascript - 光标继续显示 - 尽管它被设置为无，并且仅当在 div 上时。 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;
}

理论上应该可以解决问题。

但是，正是由于上述原因，大多数浏览器对 html 应用了更严格的规则。为 pointer 设计的元素互动，当涉及到cursor属性(property)。即，对于 <button>秒。这就是为什么您需要更强的 CSS规则应用。如:

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

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