0

I am trying to use a custom cursor with the URL given in the answer to this question: (the grab cursor that gmail uses)

How can you implement a grabbing cursor icon in Chrome?

I am using this exact method shown in the snippet, which works. But when I try it with my actual project I get this error in the javascript console:

GET file://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur net::ERR_FILE_NOT_FOUND

What what does this error mean? What can I do to make it work?

Code:

$('.hover').addClass('grab');
div {
  border: 1px solid black;
  height: 200px;
  width: 50%;
}

.grab {
  cursor: url(//ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default; !important
}
<div class="hover">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Community
  • 1
  • 1
Adam M.
  • 61
  • 11
  • 1
    Why not just save the cursor locally and change the path instead of using a google hosted one? Here's the file http://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur – Brett Gregson Mar 09 '17 at 22:55
  • 1
    your url starts with `//` - that means use the "protocol" of the page - if you are loading the page locally using `file:///` - then of course `file://...` wont exist ... this is not a chrome specific problem, all browsers WILL fail – Jaromanda X Mar 09 '17 at 22:55

1 Answers1

0

file://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur You accidentally said file; it is supposed to be https://ssl.gstatic.com/. It requires the https:// for it to work.

Octavium - The HTML Helper
  • 41
  • 1