所以我遇到了一个光标的问题。基本上,我的菜单允许键盘导航,所以每当按下一个键时,它会隐藏光标。
这里是返回它的代码:
我不确定还需要包括什么内容,因为我真的不知道为什么会发生这种情况。
非常感谢任何帮助!
干杯。
编辑:哦,你可以在这里查看问题:https://steamboatt.github.io/gravity/源代码:https://github.com/Steamboatt/gravity
这个很好用 (左侧截图),但是当鼠标恰好位于菜单本身上方时,尽管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