web-dev-qa-db-ja.com

Chrome（およびIE）でカーソルを非表示にする

私は次のCSSを持っており、Webページ上のすべてのものに対してマウスカーソルを非表示にします。 Firefoxでは完全に機能しますが、IEおよびChromeでは、機能しません。

html {
    cursor: none;
}

Chromeでは、常にマウスポインタが表示されます。ただし、IEでは、カーソルが画面に入ったときに最後に「アクティブ」だったカーソルが表示されます。おそらく、最後の選択を削除するのではなく保持しているのでしょう。

htmlcsscursormouse-cursor
18
Chris

このプロパティcursor:none;は標準の一部ではありません

ここを参照してください w3cカーソルCSSプロパティ 。

JavascriptまたはJQueryを使用して非表示にすることを検討することをお勧めします。

また、空白のカーソルファイルを見てください ここ 。

そして、 ajaxソリューション への最後のリンク。

Chromeは構築されてからこの問題が発生しており、 Chromium の人々に報告が送信されており、彼らはそれに取り組んでいると思います。

また、IEで何かが機能するとは思わないでください。これまで。 ：P

22
Kyle

私は最近同じ問題を抱えていて、GoogleChromeでポインタを隠すための良い解決策を見つけました。

これは W3C定義 のurlプロパティです：

カスタムカーソルへのURLで区切られたコンマ。注：URL定義のカーソルを使用できない場合に備えて、リストの最後に常に汎用カーソルを指定してください

したがって、完全に透明ではない画像へのURLを定義し、その後にデフォルトのポインタを続けることができます。

cursor: url(img/almost_transparent.png), default;

完全に透明なpngを選択すると、Chromeは代わりに黒い長方形を表示しますが、透明でない1px以上のpngを選択すると機能し、ポインタに気付くことはありません。

11
alexmeia

ブラウザ間で機能するものを見つけるのは苦痛です。

以下のコードは、Chrome、IE、およびFirefoxで機能します。 IE .curファイルが好き、Chrome埋め込みpngが好き、一部のブラウザは実際にはnoneを尊重します:)

div {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
    url(images/blank.cur),
    none;
}
7
Aditya Ravi Shankar

したがって、これに対処する最善の方法は、ポインターロックAPIです。

https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock

マウスカーソルは非表示になりますが、マウスの動きに関するデータにもアクセスできます。

0
RandallB