Html 在 Chrome(和 IE)中隐藏光标

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2636068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:43:09  来源:igfitidea点击:

Hide cursor in Chrome (and IE)

htmlcsscursormouse-cursor

提问by Chris

I have the following CSS that hides the mouse cursor for anything on the web page. It works perfectly in Firefox, but in IE and Chrome, it doesn't work.

我有以下 CSS 可以隐藏网页上任何内容的鼠标光标。它在 Firefox 中完美运行,但在 IE 和 Chrome 中,它不起作用。

html {
    cursor: none;
}

In Chrome, I always see the mouse pointer. In IE, however, I see whatever cursor was last 'active' when it entered the screen. Presumably it's keeping the last selection instead of removing it.

在 Chrome 中,我总是看到鼠标指针。但是,在 IE 中,当光标进入屏幕时,我会看到最后一次“活动”的光标。大概是保留最后一个选择而不是删除它。

回答by Kyle

This property cursor:none;isn't part of the standard

此属性cursor:none;不是标准的一部分

See here w3c cursor CSS properties.

请参阅此处w3c 光标 CSS 属性

You might want to look into hiding it with Javascript or JQuery.

您可能想考虑使用 Javascript 或 JQuery 隐藏它。

Also, look at blank cursor files here.

另外,请在此处查看空白光标文件。

And one last link to an ajax solution.

以及指向ajax 解决方案的最后一个链接。

Chrome has had this issue since it was built, there have been reports sent to the people at Chromium, and I assume they are working on it.

Chrome 自构建以来就遇到了这个问题,已经向Chromium的人员发送了报告,我认为他们正在解决这个问题。

Also, don't trust that anything would work in IE. Ever. :P

另外,不要相信任何东西都可以在 IE 中工作。曾经。:P

回答by alexmeia

I had the same problem in these days and found a good solution to hide the pointer in Google Chrome.

这些天我遇到了同样的问题,并找到了一个很好的解决方案来隐藏 Google Chrome 中的指针。

This is the W3C definitionof url property:

这是url 属性的W3C 定义

A comma separated of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used

逗号分隔的自定义光标的 URL。注意:始终在列表末尾指定通用游标,以防无法使用任何 URL 定义的游标

So, you can define a url to not completely transparentimage, followed by the default pointer:

因此,您可以定义一个 url 为不完全透明的图像,后跟默认指针:

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

If you choose a totally transparent png, Chrome will display a black rectangle instead, but if you choose a png with at least 1px not transparent it will work, and nobody will notice the pointer.

如果您选择完全透明的 png,Chrome 将显示一个黑色矩形,但如果您选择至少 1px 不透明的 png,它将起作用,并且没有人会注意到指针。

回答by Aditya Ravi Shankar

Finding something that works across browsers is a pain.

找到可以跨浏览器工作的东西是一种痛苦。

The code below works on Chrome, IE, and Firefox. IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)

下面的代码适用于 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;
}

回答by RandallB

So the best way to deal with this now is the pointer lock api.

所以现在处理这个问题的最好方法是指针锁 api。

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

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

It'll hide the mouse cursor, but give you access to the data about mouse movement as well.

它会隐藏鼠标光标,但也可以让您访问有关鼠标移动的数据。

回答by ununiform

In css: * { cursor: url(cursor.png), none !important }

在 CSS 中: * { cursor: url(cursor.png), none !important }

回答by dmase

Use a hidden applet with the java.awt.robot class to move the cursor off the sreen. Say the very lower left corner.

使用带有 java.awt.robot 类的隐藏小程序将光标移出屏幕。说最左下角。