I am currently trying to set a custom image as the cursor using jQuery in this manner
$(document).ready(function(){
$("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto');
});
While this method works, there are some issues that I have encountered:
- Performing quick and sharp movements with the mouse can sometimes cause the cursor to revert back to a non-image cursor. The easiest way to replicate this is by moving the pointer in small quick circles. (this behavior is a bit odd but manageable)
- Clicking anywhere causes the cursor to switch back to a non-image cursor (this is the primary issue)
You can view a demonstration of the problem in this jsfiddle link
I also attempted to achieve the same result using CSS directly, but encountered the same issues.
div{
cursor: url(http://affordable-glass.com/test/penguinSm.png),auto;
}
You can view the CSS implementation in this CSS Jsfiddle link
I tested the behavior on different systems, and consistently experienced the same results:
- Windows, using Chrome Version 39.0.2171.95 m (running in virtualBox on my mac)
- Mac, using Chrome Version 39.0.2171.95 (64-bit)
- Mac, Firefox version 34.0.5
- On an actual Windows PC running Chrome Version 39.0.2171.95 m, the issue does not occur
It appears that this may be a machine-specific issue?
Here are the specifications of my system: