Edge customize cursor doesn't work

2019-02-20 04:08发布

Below is my code, cursor1.cur icon is under the same root folder as index.html. The cur icon can be downloaded from this link: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursors/cursor1.cur

It works well in IE11, but doesn't work in Edge. Can anyone help me?

Update: if replace cursor1.cur with url: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursors/cursor1.cur. It works in Edge as well. But still I'd like to know how to use relative path in Edge.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style type="text/css">
    #myP {
        width: 200px;
        height: 200px;
        background-color: red;
        cursor: url('cursor1.cur'), pointer;
        } 
</style>
</head>

<body>
Content of the document......
<p id="myP">

</p>
</body>

</html> 

However, I found this example works in both IE11 and Edge: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_c.htm. Which makes me confused about why my code only work for IE11.

1条回答
等我变得足够好
2楼-- · 2019-02-20 04:55

I know I am late to the party, but there is another option for Edge that I have come across. Only .cur files will work in Edge for setting a custom cursor. You can use a URL to a .cur file or the path in your project to a local resource. But be sure to not put any numbers between end parens and the auto keyword. My use case was changing the cursor for fabric js annotations. The important part is to not put anything between the end parens and the auto keyword or else Edge will ignore the cursor change. Chrome and Firefox of course have no problem with this.
So I check if it is Edge then I use freeDrawingCursor = 'url(http://cur.cursors-4u.net/others/oth-7/oth697.cur),auto'; and if it is a different browser I can specify numbers such as freeDrawingCursor = 'url(http://cur.cursors-4u.net/others/oth-7/oth697.cur) 0 34,auto'; Most answers you see online will show numbers being used so be aware of what browser your user is on.

查看更多
登录 后发表回答