光标不在边上

Question

晚上好伙计们，我将这些 css 代码行添加到我的网站，将光标变成图像，适用于除边缘之外的任何浏览器。可能是我的问题，我做错了什么吗？

  #arr-left{
    position:relative;
    cursor: url('http://mysito/wp-content/uploads/2020/03/left-arrow.png') ,auto;   
    }

Answer 1

据我所知，IE和旧版Microsoft Edge都只支持游标中的.cur文件url属性。由于 New Microsoft Edge 基于 Chromium，因此 New Microsoft Edge 和 Chrome 浏览器都将支持 .png 类型文件和 .cur 类型文件。您可以检查这些类似的主题：Edge customize cursor doesn't work and Custom Cursor on Microsoft Edge has an Offset

作为解决方法，我建议您将图像格式从 .png 文件更改为 .cur 文件。您可以使用 Google 或 Bing 搜索“.cur 编辑器”，然后将 .png 文件转换为 .cur 文件。

此外，我创建了a sample来测试它。 .cur 文件在 IE 11、旧版 Microsoft Edge、新 Microsoft Edge 和 Chrome 浏览器中运行良好。你可以检查一下：

<style>

    #arr-left {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        #arr-left {
            cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'),auto;
        }
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS styles go here */
        #arr-left {
            /*cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'), pointer;*/
            cursor:url("Images/left-arrow.cur"), auto;
        }
    }

    @supports (-ms-ime-align:auto) {
        /* Edge 16+ CSS */
        #arr-left {
            /*cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'), pointer;*/
            cursor: url("Images/left-arrow.cur"), auto;
        }
    }
</style>
<div id="arr-left">
    content
</div>

我本地的截图如下（使用IE 11和Microsoft Edge 44.18362.449.0）：

光标不在边上

The cursor does not turn on the edge

css

cursor

microsoft-edge