css - Edge customize cursor doesn't work

Question

Welcome To Ask or Share your Answers For Others

css - Edge customize cursor doesn't work

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Edge customize cursor doesn't work

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T20:07:21+0000

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.

Categories

css - Edge customize cursor doesn't work

css - Edge customize cursor doesn't work

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags