Czy można ukryć kursor na stronie internetowej za pomocą CSS lub JavaScript?

129

Chcę ukryć kursor podczas wyświetlania strony internetowej, która ma wyświetlać informacje w hali budynku. To wcale nie musi być interaktywne. Próbowałem z właściwością kursora i przezroczystym obrazem kursora, ale nie udało mi się.

Czy ktoś wie, czy można to zrobić? Przypuszczam, że można to uznać za zagrożenie bezpieczeństwa dla użytkownika, który nie może wiedzieć, gdzie klika, więc nie jestem optymistą ... Dziękuję!

javascript html css yeyeyerman
źródło

Odpowiedzi:

202

Z CSS:

selector { cursor: none; }

Przykład:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
Rozwiń fragment

Aby ustawić to na elemencie w JavaScript, możesz użyć stylewłaściwości:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

Jeśli chcesz ustawić to na całym ciele:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

Upewnij się jednak, że naprawdę chcesz ukryć kursor. To naprawdę może irytować ludzi.

Lucas Jones
źródło
Udało się idealnie! Ciekawostką jest to, że przeszukałem specyfikację W3C ( w3.org/TR/CSS2/ui.html ) i nic o tym nie mówili. Dzięki!
yeyeyerman
10
W3 raczej! Świat Świat Wide Web.
Lucas Jones
4
Jak dbać o przeglądarki, które nie obsługują CSS3: użyj 1x1przezroczystego png w pikselach lub png przezroczystości 1%.
Derek 朕 會 功夫
1
O ile mi wiadomo, IE6 obsługuje przezroczyste PNG, o ile jest to rzeczywista przezroczystość, a nie przezroczystość kanału alfa. Jeśli masz wątpliwości, sprawdź sam zestaw testów: libpng.org/pub/png/pngsuite.html .
Shi,
3
@MatthiasHerrmann: Spróbuj document.body.style.cursor = 'auto'.
Lucas Jones
30

Pointer Lock API

Chociaż cursor: nonerozwiązanie CSS jest zdecydowanie solidnym i łatwym obejściem , jeśli Twoim rzeczywistym celem jest usunięcie domyślnego kursora podczas korzystania z aplikacji internetowej lub zaimplementowanie własnej interpretacji nieprzetworzonego ruchu myszy (na przykład w grach FPS), możesz zamiast tego warto rozważyć użycie interfejsu API Pointer Lock .

Możesz użyć requestPointerLock na elemencie, aby usunąć kursor i przekierować wszystkie mousemovezdarzenia do tego elementu (który możesz obsłużyć lub nie):

document.body.requestPointerLock();

Aby zwolnić blokadę, możesz użyć exitPointerLock :

document.exitPointerLock();

Dodatkowe uwagi

Żaden kursor, naprawdę

To bardzo potężne wywołanie API. Nie tylko sprawia, że ​​kursor jest niewidoczny, ale w rzeczywistości usuwa natywny kursor systemu operacyjnego . Nie będziesz w stanie zaznaczyć tekstu ani nic zrobić za pomocą myszy (z wyjątkiem słuchania niektórych zdarzeń myszy w kodzie), dopóki blokada wskaźnika nie zostanie zwolniona (za pomocą exitPointerLocklub naciśnięcia ESCw niektórych przeglądarkach).

Oznacza to, że nie możesz opuścić okna z kursorem, aby ponownie się pokazało, ponieważ nie ma kursora.

Ograniczenia

Jak wspomniano powyżej, jest to bardzo potężne wywołanie API, dlatego może być wykonywane tylko w odpowiedzi na pewne bezpośrednie interakcje użytkownika w sieci, takie jak kliknięcie; na przykład:

document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

Ponadto requestPointerLocknie będzie działać z piaskownicy, iframechyba że allow-pointer-lockzezwolenie jest ustawione.

Powiadomienia użytkownika

Niektóre przeglądarki monitują użytkownika o potwierdzenie przed włączeniem blokady, inne po prostu wyświetlają komunikat. Oznacza to, że blokada wskaźnika może nie zostać aktywowana od razu po wywołaniu. Jednak faktycznej aktywacji blokowania wskaźnika można odsłuchać nasłuchując pointerchangezdarzenia na elemencie, na którym requestPointerLockzostał wywołany:

document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

Większość przeglądarek wyświetla wiadomość tylko raz, ale Firefox od czasu do czasu spamuje wiadomość przy każdym połączeniu. AFAIK, można to obejść tylko za pomocą ustawień użytkownika, zobacz Wyłączanie powiadomienia o blokadzie wskaźnika w przeglądarce Firefox .

Słuchanie surowego ruchu myszy

Interfejs API Pointer Lock nie tylko usuwa mysz, ale zamiast tego przekierowuje surowe dane ruchu myszy do elementu, który requestPointerLockzostał wywołany. Można tego odsłuchać po prostu używając mousemovezdarzenia, a następnie uzyskując dostęp do właściwości movementXi movementYobiektu zdarzenia:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});
John Weisz
źródło
1
Dzięki za to. Uważam, że jest to jedyny niezawodny sposób na pozbycie się kursora w SPA podczas przełączania na pełnoekranowy pokaz slajdów.
Velojet
1

Zrobiłem to z przezroczystym * .cur od 1 do 1 piksela, ale wygląda to jak mała kropka. :( Myślę, że to najlepsza rzecz, jaką mogę zrobić w różnych przeglądarkach. CSS2.1 nie ma wartości „brak” dla właściwości „kursor” - zostało dodane w CSS3. To dlatego działa nie wszędzie.

zaycker
źródło
4
Zamiast tego użyj 1% przezroczystości .png / .cur.
Derek 朕 會 功夫
1

Jeśli chcesz to zrobić w CSS:

#ID { cursor: none !important; }

źródło
7
Generalnie powinieneś tego unikać !important.
Luca Steeb
0

Spróbuj tego dla całego dokumentu HTML

html * {cursor:none}

Lub jeśli jakiś css nadpisze twój kursor: nie używaj! Ważne

html * {cursor:none!important}
Pavel Salaquarda
źródło
0

Jeśli chcesz ukryć kursor na całej stronie internetowej, użycie bodynie zadziała, chyba że obejmuje całą widoczną stronę, co nie zawsze ma miejsce. Aby upewnić się, że kursor jest ukryty na całej stronie, użyj:

document.documentElement.style.cursor = 'none';

Aby go ponownie włączyć:

document.documentElement.style.cursor = 'auto';

Analog ze statycznym notacji CSS jest odpowiedź przez Pavel Salaquarda (w istocie: html * {cursor:none})

gaspar
źródło