Question

$('#spanContainingImage').hover(function () {
            //$(this).css('cursor',"vertical-text");//this works
            console.log('hover');//this is called
            $(this).css('cursor', "url('http://localhost:12062/Content/themes/base/images/G.cur')");//this fails
        });

I tried hard coding my URL, I still cannot get the cursor to change by URL. What’s wrong?

Answer 1

After some research MDN says:

[…] zero or more URLs may be specified (comma-separated), which must
be followed by one of the keywords defined in the CSS specification,
such as auto or pointer.

So I added the auto modifier to my jQuery

var url = 'url(@Url.Content("Content/themes/base/images/G.png")), auto';            
$(this).css('cursor', url);

Now it works.

Note that it is also stated you have to stick to .CUR and .ANI to maintain IE6 compatibility (wish it listed IE7).