CSS - 自定义光标图像在 Chrome 中的视口(viewport)边缘附近恢复

标签 css google-chrome

我有一个页面,其中整个区域都被链接覆盖。我已经使用 60x60 px PNG image 实现了一个自定义光标当用户将鼠标悬停在链接上时(因此页面上的任何位置,光标都应显示为白色 X)。

我的问题是:当光标(或者更确切地说,光标显示的图像边缘)接触页面边缘时,光标恢复到我指定为后备的“指针”状态。这是我使用的 CSS:

cursor: url('https://i.ibb.co/pRX8Fxg/close.png') 30 30, pointer;

jsfiddle我解决了这个问题,这似乎只发生在顶部和左侧,而不是底部和右侧(这非常令人困惑,因为这使我的理论无效,即它是由于浏览器的边缘造成的)。然而,在我的页面中,这发生在所有四个方面。

当我使用 .cur 文件时,Firefox 和 Edge 不存在此问题。

我试过:改用 .cur 文件,改变热点的位置,试图弄清楚 jsfiddle 的页面有什么不同。

任何帮助将非常感激。

最佳答案

保持光标小于或等于 32x32 DIP。

Custom cursors with widths or heights greater than 32 DIP will be removed if they intersect native UX (i.e. are not fully contained in the visual viewport).

Large cursors are being used abusively on the web, to confuse users (see https://crbug.com/880863). Specifically, large custom cursors can be used to cover important (sometimes security related) browser native UX with an arbitrary image to mislead users into thinking they are clicking outside the content area.


来源:https://www.chromestatus.com/feature/5825971391299584

关于CSS - 自定义光标图像在 Chrome 中的视口(viewport)边缘附近恢复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58414589/

相关文章:

html - 播放 HTML5 视频时防止 Chrome 卡住

javascript - 为什么 console.log 甚至在修改之前就输出修改后的值?

asp.net - 为什么我在共享主机上不断收到 HTTP 403 错误?

css - 如何在 Ionic 中将图像同时放入 <ion-header> 和 <ion-content>

javascript - li 元素溢出 Card 容器并增加父容器以适应自身

jquery - Bootstrap/Masonry 列宽问题

css - 背景在移动设备上消失

css - :nth-child within Bootstrap rows

java.lang.IllegalAccessError : tried to access method com. google.common.util.concurrent.SimpleTimeLimiter 与 Selenium ChromeDriver Chrome 与 Java

html - Chrome 上的 Bootstrap 导航栏表单宽度问题