Mauszeiger nicht auf Chrom Vollbild div bleiben

Ich möchte ein HTML-Element Vollbild (ein div) machen, und den Zeiger bleiben ausgeblendet.Mauszeiger nicht auf Chrom Vollbild div bleiben

Dies scheint einfach zu sein (setzen Sie cursor:none auf dem Div, wenn es Vollbild wird), aber es funktioniert nicht über Browser hinweg.

Das folgende Snippet funktioniert gut für Firefox, aber in Chrome 56/Mac OSX erscheint der Mauszeiger nach einiger Zeit wieder (normalerweise innerhalb von 1-60 Sekunden).

Gibt es eine zuverlässige browserübergreifende Möglichkeit, den Mauszeiger im Vollbildmodus zu verbergen?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Fullscreen mouse pointer</title> 

    <style> 
     .is-fullscreen { 
      cursor: none; 
      width: 100%; 
      height: 100%;; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 

<div id="gofull"> 
FULLSCREEN AREA 
</div> 

<button onclick="makeFS()">Make fullscreen</button> 


<script> 
    // Button to make a div fullscreen and add relevant style in that case 
    function makeFS() { 
     // Get FS element, add class, and go fullscreen 
     var el = document.getElementById("gofull"); 
     el.classList.add('is-fullscreen'); 
     if (el.requestFullscreen) { 
      el.requestFullscreen(); 
     } else if (el.msRequestFullscreen) { 
      el.msRequestFullscreen(); 
     } else if (el.mozRequestFullScreen) { 
      el.mozRequestFullScreen(); 
     } else if (el.webkitRequestFullscreen) { 
      el.webkitRequestFullscreen(); 
     } else { 
      console.log('Your browser does not appear to support fullscreen rendering.'); 
     } 
    } 

</script> 

</body> 
</html>

Andere Anmerkungen

ich versucht habe cursor:none auf einem anderen Element Einstellung als das, was Vollbild wird gemacht (wie ein Kind div), aber dies auch nicht helfen.

Die Pointer-Lock-API scheint ein gewaltiger Overkill zu sein, und wir müssen lieber keine zusätzlichen Benutzerrechte für etwas anfordern, das in HTML/CSS einfach zu sein scheint.

Browser Bug Referenzen

Nur relevant Browserbugs schien videobezogenen. Dies geschieht ohne Video - nur ein statisches unveränderliches div.

Vergleich FF 51 und Chrome 56 auf Mac OS X.

Quelle

2017-02-27 abought

1) Der Cursor kann ein beliebiges Bild, das Sie es wollen sein, die unter Verwendung von Deklaration:

cursor: url([URI]), auto;

2) In base-64 encoding eine transparente Einzelpixel gif hat folgende Daten URI:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

diese beide zusammenzusetzen, kann man die Cursor in einen transparenten Einzelpixel gif drehen, wenn sie über ein bestimmtes Element schwebt:

Arbeitsbeispiel:

div { 
 
width: 100px; 
 
height: 100px; 
 
background-color: rgb(255,0,0); 
 
cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto; 
 
}

<div></div>

Quelle

2017-02-28 14:24:14 Rounin

Interessant. Ich bin nicht sicher, warum Inlining das Bild löst dies (vor allem, wenn die Alternative war "Cursor: keine"), aber es scheint zu helfen, in vorläufigen Tests. Ein seltsames Problem mit einer seltsamen Antwort vielleicht, aber ... Danke! – abought

Mauszeiger nicht auf Chrom Vollbild div bleiben

Antwort

Verwandte Themen